2024年最全Vue select 绑定动态变量_vmodel变量名非固定(1)，2024年前端进阶者的新篇章

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

Code

<div v-for="(item, index) in tagAllDate" :key="index">
                <el-form-item :label="item.name">
                    <el-select v-model="editData['line_' + index]" multiple placeholder="请选择" style="width: 100%;">
                        <el-option v-for="(itemO, o) in item.sub_list" :key="o" :label="itemO.name" :value="itemO.tag_id"></el-option>
                    </el-select>
                </el-form-item>
            </div>

editdata是声明的对象

editData:{},        

由于我们需要进行变量的动态拼接，所以不能使用“对象.属性”这种语法，使用中括号[]可以方便我们进行属性名的动态拼接。因为属性名并不能提前知道，所以editData中不能提前声明变量。而这就是问题的关键所在。前端培训

问题
由于v-model绑定的值没有声明，所以组件渲染后，当进行下拉选择时，选项的值并没有显示在组件中。但是输出结果时，值已经被选中了。也就是说，能够选到值，但页面上组件无响应。
如果假定我们拼接的id为[1,2,3] ，所以变量名为line_1, line_2, line_3 。在editData中依次声明这些变量后，组件显示正常。
结论
el-select组件需要绑定明确的变量，如果变量没有提前声明，则组件选择时界面将会无响应。

解决方案

tagAll() {
                this.loading = true;
                tagAll().then(response => {
                    if(response.ret == 0) {
                        response.data.forEach( (item, index)=>{
                              this.$set(this.editData, "line_" + index, [])
                        });
                        this.tagAllDate   = response.data;
                    } else {
                        this.$message.error(response.res_info);
                    }
                    this.loading = false
                })
            },

按照官方说明，在初始化的时候，会生成属性的getter、setter。通过setter函数的调用，从而触发组件更新。而直接赋值，并没有setter函数的触发。

另一个问题，

**editData是动态的，里面的 line\_ 也是动态的，如何去获取这些信息呢**

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整