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

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

提前感谢。

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

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

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

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

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

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

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

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

---

通常我使用计算属性

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>

---

正在工作。

通常我使用计算属性

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>

---

正在工作。

谢谢你的帮助。你的代码有道理，但我无法让它工作。我已经更新了我的答案，以备进一步参考。目前，我收到如下错误：[Vue warn]：getter for watcher filteredOptions中的错误：在中找到，感谢您的帮助。你的代码有道理，但我无法让它工作。我已经更新了我的答案，以备进一步参考。当前我收到如下错误：[Vue warn]：getter for watcher filteredOptions中的错误：在中找到