Vue select 具有深层嵌套数据

Question

我正在尝试根据官方文档中的说明制作一个 v-select，但我的数据比文档中显示的数据嵌套更多，我无法在我的 v-select 中显示我的数据的 llcName，我坚持这个。

这是我的 html div 和 Vue 实例，数据如下

<div id="vs">
  <h1>Vue Select</h1>
  <v-select multiple :options="options" :reduce="node=>  node.llcName" label='llcName' v-model='selected' />
  <pre>[[$data]]</pre>
</div>

<script>


Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#vs',
  delimiters: ["[[", "]]"],
  data: {
    options: [
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA1",
        "llcName": "new",
        "suppPayment": {
          "edges": [0]
        }
      }
    },
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA2",
        "llcName": "new2",
        "suppPayment": {
          "edges": [1]
        }

      }
    },
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA3",
        "llcName": "rteer",
        "suppPayment": {
          "edges": [2]
        }
      }
    }
  ],
    selected:"",
  }
})
</script>

Answer 1

我认为你应该使用 getOptionLabel 而不是 label 并且你的 reduce 属性.

有误

<v-select
  multiple
  v-model='selected'
  :options='options'
  :get-option-label='option => option.node.llcName'
  :reduce='option => option.node.llcName'/>

Fiddle

Vue select 具有深层嵌套数据

Vue select with deep nested data

vue.js

vue-select