带有 Vue I18n 的 vue-treeselect 组件答案

【问题标题】：vue-treeselect component with Vue I18n带有 Vue I18n 的 vue-treeselect 组件
【发布时间】：2020-07-16 19:27:18
【问题描述】：

如何将https://vue-treeselect.js.org/ 与 Vue I18n 一起用作多语言组件？ json 文件（my-es.json、my-en.json）、占位符等应根据所选语言进行更改。

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ $t("message.title") }}</p>
        <treeselect v-model="value" :multiple="true" :options="options" :clear-on-select="clearOnSelect" placeholder="placeholder english" noResultsText="Retry?">
            <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                {{ node.label }}
            </label>
        </treeselect>
    </div>
</body>
<script>
    const messages = {
        en: {
            message: {
                title: 'Title english',
            }
        },
        es: {
            message: {
                title: 'Títuo epañol',
            }
        }
    }

    const i18n = new VueI18n({
        locale: 'en',
        messages,
    })

    Vue.component('treeselect', VueTreeselect.Treeselect)
    var tree = new Vue({
        i18n,
        data: {
            value: null,
            clearOnSelect: true,
            closeOnSelect: true,
            selectAll: true,
            options: []
        },
        methods: {
            normalizer: function (node) {
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children,
                };
            },
        },
        mounted() {
            let vm = this;
            $.getJSON("https://raw.githubusercontent.com/javierpose/pruebas/master/my-es.json", function (json) {
                vm.options = json;
            });
        }
    }).$mount('#app')
</script>

【问题讨论】：

是的，您可以添加另一个 json 文件，其中包含例如占位符和标签翻译，您的配置应该像 const messages = { en: { options: [],label:'',placeholder:'' }, es: { options: [],label:'',placeholder:'' } } 并像使用选项一样进行另一个 ajax 调用来更新它们

标签： javascript vue.js vue-component

【解决方案1】：

如下初始化 i18n 配置：

const messages = {
  en: {
    options: []
  },
  es: {
    options: []
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages,
})

然后在挂载的钩子中通过循环可用的语言通过 ajax 调用添加选项：

 ['en', 'es'].forEach(lng => {
      $.getJSON("https://raw.githubusercontent.com/javierpose/pruebas/master/my-" + lng + ".json", function(json) {
        vm.options = json;
        i18n.setLocaleMessage(lng, {
          options: json
        })

      });
    });

最后绑定select options prop $t('options')。

以下示例说明了您使用单选按钮更改语言的情况：

const messages = {
  en: {
    options: []
  },
  es: {
    options: []
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages,
})

Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
  i18n,
  data: {
    value: null,
    clearOnSelect: true,
    closeOnSelect: true,
    selectAll: true,
    options: [],
    lang: 'en'
  },
  methods: {
    normalizer: function(node) {
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      };
    },
  },
  mounted() {
    let vm = this;
    ['en', 'es'].forEach(lng => {
      $.getJSON("https://raw.githubusercontent.com/javierpose/pruebas/master/my-" + lng + ".json", function(json) {
        vm.options = json;
        i18n.setLocaleMessage(lng, {
          options: json
        })

      });
    });
  }
}).$mount('#app')

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
  <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
</head>

<body>
  <div id="app">
    <input type="radio" id="en" value="en" v-model="$i18n.locale">
    <label for="en">English</label>
    <br>
    <input type="radio" id="es" value="es" v-model="$i18n.locale">
    <label for="es">Spanish</label>
    <br>
    <span>Language : {{ lang }}</span>


    <treeselect v-model="value" :multiple="true" :options="$t('options')" :clear-on-select="clearOnSelect" placeholder="placeholder english" noResultsText="Retry?">
      <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
                {{ node.label }}
            </label>
    </treeselect>
  </div>
</body>

【讨论】：

但是，我没有看到获取占位符和标题文本的方法，只能更改 json 文件
你应该像我们使用选项一样将它们添加到 json 文件中
可以分开吗？
是的，您可以添加另一个 json 文件，其中包含例如占位符和标签翻译，您的配置应该类似于 const messages = { en: { options: [],label:'',placeholder:'' }, es: { options: [],label:'',placeholder:'' } } 并像使用选项一样进行另一个 ajax 调用来更新它们