CODEWITHSUNDEEP
javascriptvuexvue.jsvuejs2
Saurabh
Saurabh

Reputation: 73609

data variable not being updated from watcher on computed property in Vue.js with Vuex

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.

Upvotes: 5

Views: 2154

Answers (2)

Aletheios
Aletheios

Reputation: 4020

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"
    }
}

Upvotes: 4

Simon Martinelli
Simon Martinelli

Reputation: 36163

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"
    }

Upvotes: 1

Related Questions