想做一个前端全选的directive,调用如下
<input type="checkbox" v-model="checkAll" v-check-all="checkAll" :check-data="checkData">
<div v-for="data in checkData">
<input type="checkbox" v-model="data.checked">
{{data.text}}
</br>
</div>
指令的形式如下
export default {
'check-all': {
deep: true,
params: ['checkData'],
bind() {
console.log('bind');
console.log(this.params.checkData);
},
update(newValue, oldValue) {
console.log(newValue, oldValue);
},
unbind() {
console.log('unbind');
},
paramWatchers: {
'checkData': function (newValue, oldValue) {
console.log(newValue);
},
},
},
};
checkData的数据如下:
checkData: [
{
text: '1',
checked: false,
},
{
text: '2',
checked: false,
},
{
text: '3',
checked: false,
},
{
text: '4',
checked: false,
},
]
当checkData中的元素checked状态改变时,更改checkAll的状态,但是paramWatchers监听不了checkData的更改,请问是什么原因呢?要在指令里面监听checkData的状态更改要怎样做?
这样可以监测:
https://jsfiddle.net/lincenyi...
但是通过v-model绑定,就监测不到了:
https://jsfiddle.net/dv0dmsrr/
经群友提醒,和看了一下源码,paramWatchers应该调用的是watch,没用深检测,不知道是不是这样。源码如下: