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

Automatically populate select2 dropdown in ASP.NET MVC Core using AJAX

Is Bootstrap compatible with Vue3 or is it specifically designed for use with Vue2?

The built-in browser form validation is failing to function properly within a Vuetify v-form component

Verify if a specific key is present in associative arrays

Saving JSON data into an HTML element using Handlebars templating

jquery function context

What is the best way to begin IMA HTML5 SDK ads with sound off?

React Native Child Component State Update Issue

Extracting all usernames of members present in a specific voice channel and converting them into a string using Node.js on Discord

Is it possible to automatically redirect to a different URL if the server is running slow when clicking?

"An error has occurred stating that the header is not defined in

Generating a list of values separated by commas from a Microsoft Excel column after applying regular expressions

Adjust the size of an HTML image for printing using a JavaScript window.print() function

Gaining access to the isolated scope of a sibling through the same Angular directive led to a valuable discovery

What causes jquery-ui resizable to set the width of the div with the "alsoResize" property?

`Can I embed inline .svg images into a Nuxt application?`

What is the process for dynamically declaring a variable within the data function in Vue.js?

Tips on utilizing browser scroll for horizontal overflow of internal div?

Applying various Angular filters to an array of objects within HTML select elements

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button