Vue select 绑定动态变量
概述
- 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定。所以通过数据的id或者下标进行变量拼接。页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示
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 == ) {
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_ 也是动态的,如何去获取这些信息呢
对象是editDate。但是里面的line_0 是动态创建的,就是说,editDate里面有多少的数据不知道,可能是:line_0 line_1 line_2 然后这些每一个都是数组,现在要拿到这些所有的数组里面的数据。
做法
首先循环这个对象拿到所有的Key的值,就是 line_0 line_1 这些key
for(var a in this.editData){
console.log(a);
}
拿到key之后便可以直接根据动态的key拿到数组循环拿相应的值
for(var a in this.editData){
this.editData[a].forEach( (item, index) => {
console.log(item)
});
}
Vue select 绑定动态变量的更多相关文章
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- 关于网上大量对Vue双向绑定的错误理解
对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...
- vue for 绑定事件
vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...
- checkbox radio select绑定
index11.html <html><head> <title>checkbox radio select绑定</title> <script ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
- Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- 梳理vue双向绑定的实现原理
Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
随机推荐
- 25-Node.js学习笔记-express-app.locals对象
app.locals对象 将变量设置到app.locals对象下面,这个数据在所有的模板中都可以获取到 app.locals.users=[{ name:'柠檬不酸', age:20 },{ name ...
- paper 158:CNN(卷积神经网络):Dropout Layer
Dropout作用 在hinton的论文Improving neural networks by preventing coadaptation提出的,主要作用就是为了防止模型过拟合.当模型参数较多, ...
- LOJ 6435 「PKUSC2018」星际穿越——DP+倍增 / 思路+主席树
题目:https://loj.ac/problem/6435 题解:https://www.cnblogs.com/HocRiser/p/9166459.html 自己要怎样才能想到怎么做呢…… dp ...
- CTF | bugku | 字符?正则?
做题链接 一个详细讲正则的网址1 一个详细讲正则的网址2 代码如下 <?php highlight_file('2.php'); $key='KEY{********************** ...
- 2018-2019-20175203 实验二 《Java面向对象程序设计》
2018-2019-20175203 实验二 <Java面向对象程序设计>实验报告 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑 ...
- C# Self Injector into non managed process
Hey all, I'm gonna explain you how make a self injecting program in C#.I hope you guys thinks its us ...
- English-such as, for example, include and contain
such as 后接动词,通常用动名词,有时也可用动词原形 for example 后接动词,用动名词 include vt. 包含,包括 后接动词,用动名词 英英: If one thing inc ...
- UITableView 支持左右滑动(二)
原理: 用tableView其中一个cell 来展示一个 UIScrollView, 在scrollview上很像放置子tableView 注意点: 外层tableView需要实现手势代理 /* 若重 ...
- appium常见问题11_小米手机初次启动app,报错255“Requires permission android.permission.WRITE_SECURE_SETTINGS”
问题: 新申请的测试机到啦,申请机型是小米9.打开开发者模式.USB调试后,连接电脑,准备跑一下自动化脚本.但是在pycharm中点击run后,出现报错,报错code:255,提示“Requires ...
- 解决text-align: justify;浏览器、安卓手机不兼容问题
1.兼容PC端浏览器 .h_text{ text-align:justify; text-justify:inter-ideograph;width:200px;} .span_hid{ displa ...