current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite
3

Fiddle: https://jsfiddle.net/mjvu6bn7/

I have a watcher on a computed property, which has a dependency on Vuex store variable, which is being set asynchronously. I am trying to set data variable of Vue component, when this computed property is changing, but this is not happening.

Here is Vue component:

new Vue({
  el: '#app',
  store,
  data : {
        myVar : ""

  },
  beforeMount() {
        this.$store.dispatch('FETCH_PETS', {
        }).then(() => {
                    console.log("fetched pets")
        })

  },
  computed:{
      pets(){
        return this.$store.state.pets
      }
    },
  watch:{
    pets: (pets) => {
      console.log("Inside watcher")
      this.myVar = "Hey"
    }
  }
});

Here is Vuex store:

const state = {
  pets: []
};

const mutations = {
  SET_PETS (state, response) {
        console.log("SET_PETS")
    state.pets = response;
  }
};

const actions = {
 FETCH_PETS: (state) => {
      setTimeout(function() { 
            state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
    }, 1000)
 }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
});

Here is fiddle created for this. As you can see, myVar is not being updated, however watcher gets called when pets get loaded.

share|improve this question
up vote 2 down vote accepted

You missed the fact that ES6 arrow functions do not bind the this keyword (arrow functions aren't simply syntactic sugar over a regular function). So in your example, this inside the pets watcher defaults to window and myVar on the Vue instance is never set. If you change your code as follows, it works fine:

watch: {
    pets(pets) {
        console.log("Inside watcher")
        this.myVar = "Hey"
    }
}
share|improve this answer
up vote 1 down vote

That's because this is not what you expect in the inner function.

Try this:

watch:{
    var that = this;
    pets: (pets) => {
      console.log("Inside watcher")
      that.myVar = "Hey"
    }
share|improve this answer
    
That's actually a syntax error - you can't put variable declarations inside object literals. – Aletheios Nov 11 '16 at 23:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.