CODEWITHSUNDEEP
vue.js
R.L
R.L

Reputation: 125

vuejs Treeselect display additional elements in the objective other than jd and label

in my front end I use vuejs treeselect to display sever data. I would like to display additional info other than id and label while user click the select box. my array looks like this:

[ {"id":"1","label":"car", "price":"xyz", "desc":"sth sth sth"},
{"id":"2","label":"bike", "price":"aa", "desc":"blah blah blah"}
]

How can I display respective "price" and "desc" info while the user selected the label from the drop down. thanks!

Upvotes: 0

Views: 4514

Answers (1)

ittus
ittus

Reputation: 22403

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/[email protected]/dist/vue-treeselect.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Related Questions