Utilizing Vue.js 2 to dynamically update data through directives

Question

Utilizing Vue.js 2 to dynamically update data through directives

Is it possible to change a data property from a directive using single file components?

For instance, consider the following code...

export default {
    name: 'app',
    data: function() {
        return {
            is_loading: true
        }
    },
    directives: {
        do_something: {
            bind: function(el, binding, vnode) {
                // How can we alter the value of 'is_loading' property?
            }
        }
    }
}

I initially attempted this.is_loading = false, but unfortunately, this turned out to be undefined.

javascript properties vue.js directive vue-component

Answer 1

Answer №1

If you want to reference this in a directive, you can easily do so by using vnode.context. In your directive code, it would look like this:

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

Next, in your markup, you can use:

<div v-do_domething></div>

Feel free to check out the JSFiddle demo here: https://jsfiddle.net/3qvtdgyd/

Answer 2

If you want to reference this in a directive, you can easily do so by using vnode.context. In your directive code, it would look like this:

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

Next, in your markup, you can use:

<div v-do_domething></div>

Feel free to check out the JSFiddle demo here: https://jsfiddle.net/3qvtdgyd/

Utilizing Vue.js 2 to dynamically update data through directives

Answer №1

Similar questions

I'm looking to create a redirect feature using a QR code that will direct users to a specific page within my Flutter app. How

Is it possible to pass multiple parameters in one onClick event?

How can information be exchanged between PHP and JavaScript?

Determining the availability of a remote source in React: A step-by-step guide

Autofill functions may not be compatible with input fields generated using JavaScript

Problem: Vue 3 build does not generate service worker

The variable 'props' is given a value but is never utilized - warning about unused variables in Vue 3

Issue with Adding Additional Property to react-leaflet Marker Component in TypeScript

detect mouse click coordinates within an iframe that spans multiple domains

How can you fix the "bad value" response in mongodb when utilizing query parameters in the url?

Printing without sufficient paper will result in an incomplete printout

Sign up for an observable only when a specific variable has been modified

Enhance Your Vue.js 2.0 Experience: Implementing Vue Components Generated with v-html and Compiling the Markup

Enhance the readability and writability of the properties of JavaScript objects

How can I make Material UI's grid spacing function properly in React?

Is there a way to ensure the alignment of items remains consistent, especially for the rightmost column, by enclosing them within a div element?

A guide on using jQuery-Tabledit and Laravel to efficiently update table rows

Exploring the possibilities of using React for looping?

What methods can be used to block direct attribute updates in a JS/TS class?

Decoding the Blueprint of Easel in JavaScript