CODEWITHSUNDEEP
vue.jsvuejs2vue-componentv-select
Syed
Syed

Reputation: 16543

How to use v-select but not repeat itself while using v-for

I have array of json in groupData, how to pass the data to v-select

I know what I am doing is wrong by using v-for inside v-select, but I am not sure how to pass data:

<v-select multiple
  v-for="group in groupsData"
  :value.sync="selected"
  :options="[{label: group.group_name, value: group.id}]">
</v-select>

Plugin URL: https://sagalbot.github.io/vue-select/

This is how it's done with vue.js without v-select plugin and this works:

<select v-model="selected" multiple>
  <option v-for="group in groupsData" v-bind:value="group.group_id">{{group.group_name}}</option>
</select>

Thanks in advance.

Upvotes: 1

Views: 3509

Answers (2)

Bert
Bert

Reputation: 82489

Typically I use a computed property.

new Vue({
  el:"#app",
  data:{
    groupsData: groups,
    selected:[]
  },
  computed:{
    selectOptions(){
      return this.groupsData.map(g => ({label: g.group_name, value: g.id}))
    }
  }
})

And in your template

<v-select multiple
          :value.sync="selected"
          :options="selectOptions">
</v-select>

Working example.

Upvotes: 3

SLaks
SLaks

Reputation: 888067

v-for repeats the entire element, which is not what you want.

Instead, you want to transform your array into the options parameter.

: expressions accept arbitrary Javascript code, so you can do that exactly as you would in Javascript:

:options="groupsData.map(g => ({label: g.name, value: g.id}))"

Upvotes: 1

Related Questions