VueJS: Property or method "tagNbr" is not defined on the instance but referenced during render. Make sure that this property is reactive

1
votes

I'm trying to get a value from a VueX store during render at the render of my component. What I see is that i firstly get the error above, and then, the value is correctly updated on the component because I think that the state is well reactive but not initialized when component is rendered.

How can i avoid this error ?

template:

<span class="kt-widget17__desc">
   {{ carsNumber }}
</span>

script:

export default {
    data() {
        return {
            carsNumber: this.currentGarage.numberOfTags
        };
    },
    computed: {
        ...mapGetters(["currentGarage"]),
    }
};

Error:

Property or method "carsNumber" is not defined on the instance but referenced during render. Make sure that this property is reactive..

1
vue.jsvuejs2vue-componentvuex

1 Answers

0
votes

What I did is I created a setter and getter in computed property, in your case carsNumber instead of putting it inside the data property.

computed: {
   ...mapGetters(["currentGarage"]),

   carsNumber: {
      get(){
         return this.currentGarage.numberOfTags
      },
      set(newVal){ // setter can be excluded if not used
         // you can call this.$store.commit('yourMutation', yourValue)
      }
   }
}