首页 > vue的directive中的paramWatchers可以监测数组吗?

vue的directive中的paramWatchers可以监测数组吗?

想做一个前端全选的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,没用深检测,不知道是不是这样。源码如下:

Directive.prototype._setupParamWatcher = function (key, expression) {
  var self = this;
  var called = false;
  var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) {
    self.params[key] = val;
    // since we are in immediate mode,
    // only call the param change callbacks if this is not the first update.
    if (called) {
      var cb = self.paramWatchers && self.paramWatchers[key];
      if (cb) {
        cb.call(self, val, oldVal);
      }
    } else {
      called = true;
    }
  }, {
    immediate: true,
    user: false
  });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch);
};
【热门文章】
【热门文章】