Question

我正在尝试在组件渲染期间从VueX存储中获取值。我看到的是，我首先遇到上述错误，然后在组件上正确更新了该值，因为我认为状态是很好的反应性，但在渲染组件时未初始化。

如何避免此错误？

模板：

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

脚本：

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

错误：

属性或方法“ carsNumber”未在实例上定义，但在渲染期间引用。确保此属性是反应性的。

Answer 1

我要做的是在您所使用的carsNumber的计算属性中创建了一个setter和getter，而不是将其放入data属性中。

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

VueJS：属性或方法“ tagNbr”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的

1 个答案: