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/

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

Vue.js 2, change data from directive

javascript

directive

properties

vue.js

vue-component