parse json in a vue-treeselect component

Question

In a https://vue-treeselect.js.org/ component, how can I load json? My code is not working

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

Boussadjra Brahim · Accepted Answer · 2020-04-03T16:17:55.733

1

Put the following code inside the mounted hook :

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

you should update the options property directly in the callback of ajax request.

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

edited Apr 03 '20 at 16:17

answered Apr 03 '20 at 16:11

Boussadjra Brahim

82,684
19
144
164

Surely, I should create another question, but how could I integrate Vue I18n, for example to translate the placeholder of the treeselect? – PoseLab Apr 03 '20 at 21:00
please give me the link of that plugin – Boussadjra Brahim Apr 03 '20 at 21:01
It is this: https://kazupon.github.io/vue-i18n/ I think it is the most used plugin to create multilingual applications with Vue, but it would be better without a plugin – PoseLab Apr 04 '20 at 14:54
Ok, it would be better using a plugin since that provides a clean structure, please post a detailed question and give me the link when it will be ready – Boussadjra Brahim Apr 04 '20 at 15:15
I created a new post for this question https://stackoverflow.com/q/61032006/1504078 – PoseLab Apr 04 '20 at 17:27
i come to see your comment, give me some time to find an answer to your question – Boussadjra Brahim Apr 04 '20 at 19:14

parse json in a vue-treeselect component

1 Answers1