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 ...
随机推荐
- 【leetcode】564. Find the Closest Palindrome
题目如下: 解题思路:既然是要求回文字符串,那么最终的输出结果就是对称的.要变成对称字符串,只要把处于对称位置上对应的两个字符中较大的那个变成较小的那个即可,假设n=1234,1和4对称所以把4变成1 ...
- spring-boot整合Dubbo分布式架构案例
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 3.2.5 2.项目文件目录 3.Maven Plugin管理 总项目 pom.xml配置代码: &l ...
- sqlserver 中的时间算法
DECLARE @Date DATETIME SET @Date=GETDATE() --前一天,给定日期的前一天 ,@Date) AS '前一天' --后一天,给定日期的后一天 ,@Date) AS ...
- LOJ 6432 「PKUSC2018」真实排名——水题
题目:https://loj.ac/problem/6432 如果不选自己,设自己的值是 x ,需要让 “ a<x && 2*a>=x ” 的非 x 的值不被选:如果选自己 ...
- APIO2019 练习赛 Wedding cake——思路+高精度
题目大意: 给 n ( n<=1e5 ) 个数 \( a_i \) (\( a_i \) <=1e5),需要构造 n 个实数使得它们的和是 1 ,并且第 i 个实数必须小数点后恰好有 \( ...
- CodeForces - 849B 几何
题意:给n个点,问是否能两条平行线覆盖所有的点 思路:因为要求全部覆盖,所以我们第一个点肯定是会入其中一条直线,其实只用判前三个点的所有情况即可 #include<stdio.h> #in ...
- window 2008/2012计划任务配置
很多人在问我: 1.Windows Server 2008 计划任务在哪里配置? 2.Windows Server 2008 可以配置每分钟或是每小时执行我的任务吗? 答案是:可以! 首先Window ...
- The Tree-planting Day and Simple Disjoint Sets
First I have to say: I have poor English. I am too young, too simple, sometimes naïve. It was tree-p ...
- 使用DataV制作实时销售数据可视化大屏(实验篇)
课时1:背景介绍 任务说明 ABC是一家销售公司,其客户可以通过网站下单订购该公司经营范围内的商品,并使用信用卡.银行卡.转账等方式付费.付费成功后,ABC公司会根据客户地址依据就近原则选择自己的货仓 ...
- Xcode 10如何打包ipa包?
参考: https://www.jianshu.com/p/0421b3fd2470 前置条件 首先导入证书和配置文件 具体操作步骤: product>>Archive 如图所示,选择Di ...