对挂载中的属性的更改未触发在 VueJS 中计算

Posted 2023-03-05

【中文标题】对挂载中的属性的更改未触发在 VueJS 中计算

【英文标题】：Changes to properties in mounted not triggering computed in VueJS

【发布时间】：2019-08-21 11:05:29

【问题描述】：

我有一个 VueJS 组件，其中包含一个按钮，其类和文本是计算属性，并且每次单击按钮时都会更改。只要我在加载按钮后单击它，它们就会很好地改变。我想将状态存储在 localStorage 中，如果我重新加载页面，则根据存储的值设置文本和类。 ordered 的值正在发生变化，但按钮文本和类在 UI 中没有反映出来。有人对我可能做错了什么有任何建议吗？以下是出处

<template>
  <div class="main-view">
    <button type="button" :class="order_button_style" @click="on_order_button_click()">
       order_button_text 
    </button>
  </div>
</template>

<script>
export default 
  name: "FoodComponent",
  props: 
    item: Object
  ,
  methods: 
    on_order_button_click() 
      this.item.ordered = !this.item.ordered;
      localStorage.setItem(this.item.id, this.item.ordered);
    
  ,
  mounted() 
    var storedState = localStorage.getItem(this.item.id);
    if (storedState) 
      this.item.ordered = storedState;
    
  ,
  computed: 
    order_button_text() 
      return this.item.ordered === true ? "Ordered" : "Order";
    ,
    order_button_style() 
      return this.item.ordered === true
        ? "button ordered-button"
        : "button unordered-button";
    
  
;
</script>

【参考方案1】：

您将从本地存储中获得的是一个字符串。在挂载中，ordered 属性将是一个字符串而不是布尔值，因此您的 order_button_text 计算属性条件永远不会为真。要解决此问题，您只需将 storedState 属性转换为布尔值：

 mounted() 
    const storedState = localStorage.getItem(this.item.id) === 'true';
    if (storedState) 
      this.item.ordered = storedState;
    
  ,

【讨论】：

现货。它工作谢谢。一个明显的失误。