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

Question

我有一个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>

Answer 1

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

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