[Vuejs]-Vuejs Treeselect display additional elements in the objective other than jd and label

by

2👍

✅

You can access node.raw to access option element in options array

new Vue({
  el: '#app',
  components: {
    Treeselect: VueTreeselect.Treeselect,
  },
  data: {
    value: [],
    options: [ {"id":"1","label":"car", "price":"xyz", "desc":"sth sth sth"},
{"id":"2","label":"bike", "price":"aa", "desc":"blah blah blah"}
]
  }
})
<link href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.28/dist/vue-treeselect.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@0.0.28/dist/vue-treeselect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  Value: {{ value.map(item => item.desc) }}
  <treeselect
    :options="options"
    :multiple="true"
    v-model="value"
    value-format="object"
  />
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
     {{ node.label }} - Description: {{ node.raw.desc }}
  </label>
</div>
👤ittus

Leave a comment