update data in component from Vue.directive

Question

I have a directive that needs to update data in a Vue.component. How do I set the value? Here is my code:

Vue.directive('loggedin', function(value) {
    console.log('loggedin = ' + value);
    vm.$set('loggedIn', value);
});

vm.$set('loggedIn', value) does not work. I get the following error: Uncaught TypeError: Cannot read property '$set' of undefined

var ck = Vue.component('checkout', {
    template: '#checkout-template',

    props: ['list'],

    data: function() {
        return {
            loggedIn: '',
            billingAddr: [],
            shippingAddr: [],

        }
    },
});

The value being passed is 'true' or 'false'.

EDIT

I need to bind <div v-loggedin="true"></div> to my data value in the component and set that to 'true'. I do not need two-way binding.

Maybe I'm going about this the wrong way. Basically, I get a value for loggedin from the server and need to set my loggedIn value to true or false in the data on the component.

This seems like something you should use an application-wide store to handle and then just have a mixin on any component that needs this information — Jeff
– Jeff, Commented Mar 3, 2016 at 22:46

nils · Accepted Answer · 2016-03-03 19:07:27Z

I'm not sure how you are using your directive, so I'm just going to make an assumption. Please correct me if I'm wrong.

Have a look at the twoWay property (you would probably need to use the object syntax though):

Vue.directive('loggedin', {
  twoWay: true, // Setup the two way binding
  bind: function () {
  },
  update: function (newValue) {
    console.log('loggedin = ' + value);
    this.set(newValue); // Set the new value for the instance here
  },
  unbind: function () {
  }
});

Then you can use the directive like this (loggedIn is the property you want to write to afterwards, and which serves as the initial value as well):

<yourelement v-loggedin="loggedIn">...</yourelement>

Regarding your edit

Since you only want to pass data from your server to the component, you're much better of just using props:

var ck = Vue.component('checkout', {
    template: '#checkout-template',

    props: ['list', 'loggedIn'],

    data: function() {
        return {
            billingAddr: [],
            shippingAddr: [],

        }
    },
});

And then when using your component, pass it:

<checkout :loggedIn="true">
    ...
</checkout>

Robbie · Accepted Answer · 2016-03-04 21:19:09Z

I have decided to go another route. There had to be a simpler way of doing this. So, here is what I did.

I am checking if a user is logged in by doing an ajax request through the 'created' function on the vm. I then update the auth variable in the vm with true or false.

var vm = new Vue({
    el: 'body',
    data: {
        auth: false,

    },

    methods: {
        getData: function() {

            this.$http.get('{!! url('api/check-for-auth') !!}').then(function(response) { 
                this.auth = response.data;
            }.bind(this));
        },
    },

    created: function() {
        this.getData();
    },
});

In the component I created a props item called 'auth' and bound it to the auth data on the vm.

var ck = Vue.component('checkout', {
    template: '#checkout-template',
    props: ['list', 'auth'],
    data: function() {
        return {
            user: [],
            billingAddr: [],
            shippingAddr: [],

        }
    },

});

And my component

<checkout :list.sync="cartItems" :auth.sync="auth"></checkout>

Thanks everyone for your help.

Collectives™ on Stack Overflow

update data in component from Vue.directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related