Vue select 绑定动态变量的实例讲解


Posted in Javascript onOctober 22, 2020

概述

根据后台的数据生成多个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 == 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_ 也是动态的,如何去获取这些信息呢

Vue select 绑定动态变量的实例讲解

对象是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-element-admin使用常见问题

一、vue-element-admin添加快捷导航

Vue select 绑定动态变量的实例讲解

这个组件是基于vue-i18n因此,首先在项目中安装i18n

npm install --save vue-i18n

然后main.js中引入

import i18n from './lang' // Internationalization

然后注意src下边lang文件夹的引入。之后在layout文件夹中,添加组件:tags-view 就可以了。

二、去掉Mock使用真实数据。

main.js中找到,mock的引入直接注释掉,就好了。所有的接口请求都在 api 下边

以上这篇Vue select 绑定动态变量的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
jquery实现抽奖功能
Oct 22 #jQuery
Vue实现简单的留言板
Oct 23 #Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 #Javascript
JavaScript实现简易计算器小功能
Oct 22 #Javascript
You might like
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
php精度计算的问题解析
2019/06/21 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js实现简单的验证码
2015/12/25 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python距离测量的方法
2018/03/06 Python
Python实现购物车购物小程序
2018/04/18 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
小学模范班主任事迹材料
2014/05/13 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
责任书格式范文
2014/07/28 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
MySQL创建管理子分区
2022/04/13 MySQL