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 ...
随机推荐
- css3的三大特性以及移动端说明
css3的三大特性: 一.层叠性 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先 ...
- Laravel框架使用融云服务端SDK
方法一: 使用第三方依赖安装(在项目根目录) 第一步:安装 composer require latrell/rongcloud dev-master 第二步:更新依赖包 c ...
- linux mail 发送邮件
1.mail -s "Title“ 123456@163.com 只有主题,没有内容 2. 有邮件内容 echo "text" | mail -s "Tit ...
- .NET Core 使用 nlog 进行日志记录
1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...
- 【bzoj1458】士兵占领(最大流||有源汇最大流)
转载 http://hzwer.com/2963.html Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里 ...
- SQLserver查询作业、视图、函数、存储过程中的关键字
一.查询视图.函数.存储过程中的关键字 SELECT a.name,a.[type],b.[definition] FROM sys.all_objects a,sys.sql_modules b W ...
- Python 多进程异常处理
前言 最近项目用到了Python作为网站的前端,使用的框架是基于线程池的Cherrypy,但是前端依然有一些比较‘重’的模块.由于python的多线程无法很好的利用多核的性质,所以觉得把这些比较‘重’ ...
- Java并发AtomicLong接口
java.util.concurrent.atomic.AtomicLong类提供了可以被原子地读取和写入的底层long值的操作,并且还包含高级原子操作. AtomicLong支持基础long类型变量 ...
- 关于ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下 ...
- equals方法重写
在java中常见的equals方法的重写: 举例:一个自定义类ball如下 public class Ball { private String name; private int weight; p ...