Как использовать v-select, но не повторяться при использовании v-for

Question

У меня есть массив JSON в groupDataкак передать данные v-select

Я знаю, что я делаю неправильно, используя v-for внутри v-select, но я не уверен, как передавать данные:

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

URL плагина: https://sagalbot.github.io/vue-select/

Вот как это делается с vue.js без v-select Плагин и это работает:

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

Заранее спасибо.

Answer 1

Обычно я использую вычисляемое свойство.

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

И в вашем шаблоне

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

Рабочий пример.

Answer 2

v-for повторяет весь элемент, а это не то, что вы хотите.

Вместо этого вы хотите преобразовать свой массив в options параметр.

: выражения принимают произвольный код Javascript, так что вы можете сделать это точно так же, как в Javascript:

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