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

Question

我有 json 数组groupData，如何将数据传递给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>

工作示例。

Answer 2

v-for重复整个元素，这不是您想要的。

相反，您希望将数组转换为options参数。

:表达式接受任意 Javascript 代码，因此您可以像在 Javascript 中一样执行此操作：

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