Vuejs 2.0:如何在自定义指令中的钩子函数中访问vm实例?

时间:2017-03-14 04:40:41

标签: vue.js vuejs2

在Vuejs 1.0中,它能够从this.vm访问vue实例,但我无法在vue 2.0中找到这样做的方法。

我实际上正在尝试编写一个自定义指令来更新绑定数据,当一个元素被jquery插件更改时,该插件不会触发v-model中的任何更新。

`<input id="dayparting_switch" 
  v-model="options.dayparting" 
  v-observe="options.dayparting" 
  :cheked="options.dayparting" 
data-off="Disabled" data-on="Enabled" data-toggle="toggle" type="checkbox">`
Vue.directive('observe', {
    bind(el, args) {
        var vm = this.vm;
        $(el).change(function() {
            vm.$data = 'changed';
        });
    }
});

1 个答案:

答案 0 :(得分:7)

我发现你想要访问渲染指令的组件。

Vue.directive('observe', {
  // in the bind function, the 3rd argument is vnode (the VDOM) created by Vue.
  bind(el, bindings, vnode) {
   // vnode.context is the scope where the directive is rendered.
   const vm = vnode.context 
   $(el).change(function() {
     vm.$data = 'changed';
   });
  }
});

在源代码VNode context中查看此行。