[Vuejs]-Connect v-select with vuex: problem [object object]

by

0👍

✅

You should use the property option-label

    <div id="q-app">
      <div class="q-pa-md" style="max-width: 300px">
        <div class="q-gutter-md">
          <q-badge color="secondary" multi-line>
            Model: "{{ model }}"
          </q-badge>
    
          <q-select filled v-model="model" :options="options" label="Standard" option-label="description"></q-select>
          
          {{ model }}
        </div>
      </div>
    </div>

JS:

new Vue({
  el: '#q-app',
  data () {
    return {
      model: null,
      options: [
        {
          label: 'Google',
          value: 'Google',
          description: 'Search engine',
          category: '1'
        },
        {
          label: 'Facebook',
          value: 'Facebook',
          description: 'Social media',
          category: '1'
        },
        {
          label: 'Twitter',
          value: 'Twitter',
          description: 'Quick updates',
          category: '2'
        },
      ]
    }
  }
})

https://codepen.io/reijnemans/pen/bGpqJYx?editors=1010

Leave a comment