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;
    }
  },

对已挂载的属性的更改不会在VueJS中触发计算

1 个答案: