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

网络编程 2024/12/22 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

概述

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

对象是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-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 绑定动态变量的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Vue,select,绑定动态变量

标签：

Vue,select,绑定动态变量

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“Vue select 绑定动态变量的实例讲解”

暂无Vue select 绑定动态变量的实例讲解的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

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

Vue,select,绑定动态变量

微信小程序实现拼图小游戏

在Vue中使用Select选择器拼接label的操作

评论“Vue select 绑定动态变量的实例讲解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接