Vue.js variable not updating correctly

Question

I am having trouble a variable in vue.js.

Scenario - when a user logs in, I want to set a loggedIn variable to true and set it to false when the user logs out. My code:

index.js:

export default {

  state: {
    loggedIn  : false
  },

  login() {
    var self = this;
    var creds = {
      username: 'username',
      password: 'password'
    }

    $.ajax({
      url: '/login',
      type: 'POST',
      data: creds,
      success: function(response) {
        self.state.loggedIn = true;
        alert('Logged in!!');
      },
      error: function() {
        alert('Error logging in!');
      }
    });
  },
}

App.vue:

import auth from './index.js';

module.exports = {

  data: function () {

    return {

      loggedIn: auth.state.loggedIn,
    }

  },

  watch: {
    loggedIn: function () {
      alert('loggedIn value has changed!!!');
    }
  },

}

As you can see, in App.vue, my loggedIn variable depends on what's imported from index.js. However, it doesn't appear that loggedIn in App.vue is reactive to loggedIn in index.js.

Does anyone know what I might be doing wrong?

Thanks in advance!

Joseph Silber · Accepted Answer · 2017-01-11 01:24:51Z

1

In order to make some data reactive, you must set it as the data of a component.

Since auth.state.loggedIn holds a primitive (a Boolean), assigning its value to data.loggedIn simply copies it over to data.loggedIn.

So while data.loggedIn is reactive, auth.state.loggedIn is not. The two are simply never linked up.

The only way to make this work is to assign the whole state object to your data:

module.exports = {
  data () {
    return {
      auth: auth.state,
    }

  },

  watch: {
    'auth.loggedIn' () {
      alert('loggedIn value has changed!!!');
    }
  }
};

answered Jan 11, 2017 at 1:24

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trung Tran Over a year ago

PERFECT! Bless your soul!

Collectives™ on Stack Overflow

Vue.js variable not updating correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related