Vue.js 2,从指令更改数据

Question

使用单个文件组件,如何从指令更改数据属性？

所以,例如,我有......

export default {
    name: 'app',
    data: function() {
        return {
            is_loading: true
        }
    },
    directives: {
        do_something: {
            bind: function(el, binding, vnode) {
                // Change the is_loading property
            }
        }
    }
}

起初,我以为我可以做this.is_loading = false,但是this是undefined.

Answer 1

要this在指令中引用,您可以简单地使用vnode.context,因此在您的指令中,您将拥有:

    do_something: {
        bind: function(el, binding, vnode) {
            // same as this.is_loading in a directive
            vnode.context.is_loading = false;
        }
    }

然后在你的标记中你会做:

<div v-do_domething></div>

这是JSFiddle:https://jsfiddle.net/3qvtdgyd/