Question

在我的前端

我使用vuejs treeselect来显示服务器数据。当用户单击选择框时，我想显示除id和label之外的其他信息。我的数组看起来像这样：

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

当用户从下拉列表中选择标签时，如何显示相应的“价格”和“desc”信息。谢谢！

Answer 1

您可以访问node.raw以访问选项数组

中的选项元素

＆＃13;

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"}
]
  }
})

＆＃13;

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

＆＃13;

vuejs Treeselect显示除jd和label之外的目标中的其他元素

1 个答案: