mt-checklist 的 bug 解疑 及 防止 this 指针偏移
2024-10-20 15:50:14
1.今天在使用 mt-checklist 时,发现 绑定 change 方法后,第一次点击返回的值为 空数组
<template>
<div id="app">
<mt-checklist
title="复选框列表"
v-model="value"
align="right"
:options="options"
@change="checkon">
</mt-checklist>
</div>
</template> <script>
export default {
name: 'Test',
data () {
return {
//存放所选选项
value:[],
//checklist设置
options : [{
label: '选项A',
value: 'A'
},
{
label: '选项B',
value: 'B'
},
{
label: '选项C',
value: 'C'
},
{
label: '选项D',
value: 'D'
}]
}
},
methods:{
checkon: function(){
console.log(this.value)
}
}
}
</script> <style> </style>
原因:
版本2 中 抛弃了 change 方法,需要通过 watch 进行监听。
解决方案:
watch 监听数据变化
<template>
<div id="app">
<mt-checklist
title="复选框列表"
v-model="value"
align="right"
:options="options">
</mt-checklist>
</div>
</template> <script>
export default {
name: 'Test',
data () {
return {
//存放所选选项
value:[],
//checklist设置
options : [{
label: '选项A',
value: 'A'
},
{
label: '选项B',
value: 'B'
},
{
label: '选项C',
value: 'C'
},
{
label: '选项D',
value: 'D'
}]
}
},
watch:{
value:function(val,oldvalue) {
console.log(val);
}
},
methods:{ }
}
</script> <style> </style>
2.this 指针偏转
通过
let _this = this;
解决。
例如:
methods:{
// 赋值,防止this指针改变
let _this = this;
// 重写checkBoxList
this.nextStep.forEach(function(val,index,arr){
_this.checkBoxList[index] = [];
val.forEach(function(v,i,a){
_this.checkBoxList[index][i] = {};
_this.checkBoxList[index][i].label = v.name;
_this.checkBoxList[index][i].value = v.objectId;
});
});
}
3.动态生成 两个mt-checklist 如何同时获得两个cheklist的值?
步骤一:获取当前列表序号
步骤二:对指定的 DOM 元素进行操作
也可以写为:
.
最新文章
- AI-随机迷宫&;迷宫求解
- Linux之绝处逢生------SysRq
- Java String类中的intern()方法
- JVM内存结构
- QT设置窗口屏幕居中
- esui控件validatebox 通过正则判断输入 json传值
- MyEclipe 配置 ivy 插件
- Dev系列控件的AJAX (转)
- 中点Bresenham画圆
- Framework7
- Android特效专辑(十一)——仿水波纹流量球进度条控制器,实现高端大气的主流特效
- python 所有常用模块汇总
- 1.字符串操作:&; 2.英文词频统计预处理
- vue加elementui开发的分页显示
- Nginx加载模块
- 微信H5开发
- SQL Server中锁与事务隔离级别
- 分布式系统缓存系列之guava cache
- [UE4]name slot一个种应用技巧
- King&#39;s Quest POJ - 1904(强连通分量)
热门文章
- Leetcode 466.统计重复个数
- 使用PYTHON创建XML文档_python
- TOJ4203: Domino Piece
- POJ 2033 Alphacode
- 异常详细信息: System.Data.SqlClient.SqlException: 用户 &#39;NT AUTHORITY\IUSR&#39; 登录失败解决办法
- C++单例模式实例
- HDU——2068RPG的错排(错排公式)
- Master&;Slave是什么?
- 学习的一些mybatis
- Bzoj2038 小Z的袜子(hose)