vue.js - 如何使用 v-select 但在使用 v-for 时不重复

Question

我在 groupData 中有一个 json 数组，如何将数据传递给 v-select

我知道在 v-select 中使用 v-for 是错误的，但我不确定如何传递数据:

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

插件网址:https://sagalbot.github.io/vue-select/

这是在没有 v-select 插件的情况下使用 vue.js 完成的，它是这样工作的:

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

工作 example .