Vue select with deep nested data

Question

I'm trying to make a v-select according to instruction on official documentation but my data is more nested than it shown in documentation, i can not show in my v-select the llcName of my data, and i'm stuck with this.

This is my html div and Vue instance with data below

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

score 6 · Accepted Answer · answered Jan 11 '20 at 21:57

I think you should use getOptionLabel instead of label and there is a mistake in your reduce property.

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

Fiddle

Vue select with deep nested data

1 Answers1