Using single file components, how can I change a data property from a directive?

So for example, I've got...

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

At first I thought I could do this.is_loading = false but this is undefined.

Using single file components, how can I change a data property from a directive?

So for example, I've got...

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

At first I thought I could do this.is_loading = false but this is undefined.

• javascript
• properties
• vue.js
• directive
• vue-component

1 Answer 1

To refer to this in a directive you can simply use vnode.context, so in you directive you would have:

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

Then in your markup you would do:

<div v-do_domething></div>

Here's the JSFiddle: https://jsfiddle.net/3qvtdgyd/