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

【问题标题】：Changes to properties in mounted not triggering computed in VueJS对挂载中的属性的更改未触发在 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>

【问题讨论】：

标签： javascript vue.js vuejs2 local-storage vue-component

【解决方案1】：

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

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

【讨论】：

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