VUE动态生成 watch 侦听器
最近有需求对筛选器中指定参数做参数联动,需要侦听指定参数变化,因为参数联动关系是用户指定的,那么 VUE 的 watch 就不能写死了,得根据某个数据列表生成。于是就有了这篇文章的产生。1、问题watch需要动态生成2、解决思路创建一个全局变量用于存放 watch 列表循环生成函数对象将函数对象添加到 watch 列表watch:watch 列表;3、直接上代码//...
·
最近有需求对筛选器中指定参数做参数联动,需要侦听指定参数变化,因为参数联动关系是用户指定的,那么 VUE 的 watch 就不能写死了,得根据某个数据列表生成。
于是就有了这篇文章的产生。
1、问题
watch 需要动态生成
2、解决思路
- 创建一个全局变量用于存放 watch 列表
- 循环生成函数对象
- 将函数对象添加到 watch 列表
3、直接上代码
// 参数
var params = ["Param1":"hello", "Param2":[1,2,3], "Param3":{"text":"DMLK"}];
// 需要开启监听的列表
var linkparam = ["Param1", "Param3"]
// 创建一个全局变量用于存放 watch 列表
var linkWatch = {};
var app = new Vue({
el: '#app',
data: params,
beforeCreate() {
// ParamLink
if(linkparam.length > 0){
for(var key in linkparam){
// 解除key的引用
let tkey = key
linkWatch[tKey] = function(newVal, oldVal){
... // 这里写侦听处理代码,tKey就是参数名称
};
}
}
},
watch: linkWatch,
...
});
4、注意
- 一定要在 beforeCreate 完成拼接,否则 watch 没有内容
详细参考VUE官网VUE生命周期钩子
let tkey = key
的目的是使用let解除key的引用,如果不使用let tkey而直接使用key的话你就会看到这个样子:
而我们使用tkey消除key的引用后,正确的应该是这样
更多推荐
已为社区贡献1条内容
所有评论(0)