vue.js - 具有深层嵌套数据的 Vue 选择

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>

标签： vue.jsvue-select

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

小提琴