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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
jQuery 表格插件整理
Apr 27 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
JS打印组合功能
Aug 04 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
在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防止盗链防止迅雷下载的方法
2017/04/26 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python中for循环详解
2014/01/17 Python
Python随机读取文件实现实例
2017/05/25 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
西尔斯百货官网:Sears
2016/09/06 全球购物
回门宴答谢词
2014/01/13 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
保护环境建议书100字
2014/05/13 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
销售经理岗位职责
2015/01/31 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers