如何在 vue js 中不使用 v-for 调用选定的多个项目选项的 id？答案

【问题标题】：How to call the id of selected multiple item option without using v-for in vue js?如何在 vue js 中不使用 v-for 调用选定的多个项目选项的 id？
【发布时间】：2023-03-31 13:09:01
【问题描述】：

我在编辑帖子时遇到了使用 vue js 传递所选多个选项的值的困难。我使用元素 ui 来选择选项。

后控制器

return Post::with('category')->with('tag')->find($id);

Post.vue

 <el-select  v-model="form.tag_id" multiple placeholder="Select some">
    <el-option  v-for="tag in tags" :key="tag.id" :label="tag.name" 
    :value="tag.id">
   </el-option>
  </el-select>

<script>
data() {
return {
  tags: [],
  form: new Form({
    tag: [],
    tag_id: [],
  }),
}
// fetch all tags list
axios.get('/' + this.$route.params.trans + '/adminGetTags')
.then(({data}) => this.tags = data) 
//fetch post and tag which related to post
axios.get('/' + this.$route.params.trans + '/editPost/' + 
this.$route.params.id)
.then(({data}) => {
 //....
this.form.tag = data.tag
this.form.tag_id = data.tag
})

</script>

我需要像这样调用所选多个项目的 id

this.form.tag_id = data.tag.id

但它会报错（Cannot read property 'length' of undefined）

但是如果我使用 v-for 它将起作用，不幸的是我不能在选择标签中使用 v-model 和 v-for。知道如何解决这个问题吗？

结果

【问题讨论】：

你试过this.form.tag_id = [data.tag.id]，如果我记得正确的话，vue 会检测到multiple 指令并将预期类型设置为数组
贾斯汀，它不工作。抛出错误[Vue warn]: <transition-group> children must be keyed: <ElTag> 。但是，如果我将 el-select 更改为普通的多选，它什么也没提供。没有错误，它是空的。
检查您的 data.tag.id。 element.io jsfiddle.net/deepaksingh/fpjaqcfn 中预选选项的工作示例
Deepak，感谢您的回复。对此，我真的非常感激。实际上，我需要知道数据库的实现。我现在可以解决它，只需在方法中循环它们。

标签： html laravel vue.js

【解决方案1】：

我只是在脚本部分使用循环，它对我来说效果很好。

       var j = 0;
       for(var i=1; i<= data.tag.length; i++)
       {

           this.form.tag_id[j] = data.tag[j].id
           j += 1 
       }
       return this.form.tag_id

【讨论】：