文章/答案/技术大牛

发布

社区首页 >问答首页 >在vue-treeselect组件中解析json

问在vue-treeselect组件中解析json
EN

Stack Overflow用户

提问于 2020-04-04 00:00:49

回答 1查看 142关注 0票数 1

在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>

vue.js

vuejs2

vue-component

vue-treeselect

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-04 00:11:08

将以下代码放入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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61015845

复制

相似问题

问在vue-treeselect组件中解析json
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vue-treeselect组件中解析jsonEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vue-treeselect组件中解析json
EN