选择元素以使用nuxt-i18n在nuxt中获取语言环境

vue.js Vue.js

达蒙

2020-03-24

我使用nuxt-i18n nuxt-i18n文档链接来在我的网站上获得不同的语言环境，例如：

<nuxt-link v-for="locale in $i18n.locales"
             v-if="locale.code !== $i18n.locale"
             :key="locale.code"
             :to="switchLocalePath(locale.code)"
             class="locales white--text"
  >{{ locale.code }}
  </nuxt-link>

它工作得很好，但我想将这段代码转换为在select元素中呈现：

<select v-model="selected" class="locales white--text" @change=" ??? ">
    <option disabled value="">{{ $i18n.locale }}</option>
    <option v-for="locale in $i18n.locales" :key="locale.code">{{ locale.code }}</option>
  </select>

语言环境字符串看起来不错，但我没有找到在更改时启动switchLocalePath函数的解决方案。是否有使用nuxt（vue.js）做到这一点的正确方法？

第3488篇《选择元素以使用nuxt-i18n在nuxt中获取语言环境》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
飞云猪猪前端 2020.03.24

在这里，是下拉列表和onChange方法：

 <select v-model="selectedValue" @change="onChange(selectedValue)">
        <option disabled value>Please select one</option>
        <option
          v-for="(locale, index) in $i18n.locales"
          :key="index"
          :value="locale.code"
        >{{locale.name}}</option>
      </select>

 methods: {
    onChange(event) {
      this.$router.replace(this.switchLocalePath(event));
    }
  }

如果您想检查工作状况，请在此处构建CodeSandox Nuxt：

https://codesandbox.io/embed/codesandbox-nuxt-1bhug?fontsize=14&hidenavigation=1&theme=dark

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android