如何使用 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>

插件URL：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

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

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

: 表达式接受任意 Javascript 代码，因此您可以像在 Javascript:

中那样做

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

Answer 2

通常我使用计算属性。

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。

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

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

vue.js

vuejs2

vue-component

v-select