在 vue-treeselect 组件中解析 json答案

【问题标题】：parse json in a vue-treeselect component在 vue-treeselect 组件中解析 json
【发布时间】：2020-04-03 16:00:48
【问题描述】：

在https://vue-treeselect.js.org/ 组件中，如何加载 json？我的代码不工作

<html>

<head>
    <!-- include Vue 2.x -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <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">
</head>

<body>
    <div id="app">
        <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
</body>
<script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
    var tree = new Vue({
        el: '#app',
        data: {
            // define the default value
            value: null,
            // define options
            options: function () {
                return JSON.parse(this.json);
            }
        },
    })
    $.getJSON("my.json", function (json) {
        tree.json = json;
    });
</script>

</html>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-treeselect

【解决方案1】：

将以下代码放入mounted 钩子中：

  let vm = this;
      $.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
        vm.options = json;
      });

你应该直接在ajax请求的回调中更新options属性。

<html>

<head>
  <!-- include Vue 2.x -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
  <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">
</head>

<body>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</body>
<script>
  // register the component
  Vue.component('treeselect', VueTreeselect.Treeselect)
  var tree = new Vue({
    el: '#app',
    data: {
      // define the default value
      value: null,
      // define options
      options: []
    },
    mounted() {
      let vm = this;
      $.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
        vm.options = json;
      });
    }
  })
</script>

</html>

【讨论】：

当然，我应该提出另一个问题，但是我如何集成 Vue I18n，例如翻译 treeselect 的占位符？
请给我那个插件的链接
就是这个：kazupon.github.io/vue-i18n我觉得是用Vue创建多语言应用程序最常用的插件，但如果没有插件会更好
好的，最好使用插件，因为它提供了一个干净的结构，请发布一个详细的问题并在准备好时给我链接
我为这个问题创建了一个新帖子stackoverflow.com/q/61032006/1504078