Изменения свойств в смонтированном не инициируемом вычисляются в VueJS

Question

У меня есть компонент VueJS, который содержит кнопку, класс и текст которой являются вычисляемыми свойствами и изменяются при каждом нажатии кнопки.Они меняются нормально, пока я нажимаю на кнопку, как только она загружена.Я хотел сохранить состояние в localStorage и, если я перезагрузил страницу, установить текст и класс, основываясь на сохраненном значении.Значение заказа изменяется, но текст кнопки и класс не отражают это в пользовательском интерфейсе.У кого-нибудь есть предложения относительно того, что я могу делать неправильно?Ниже приводится источник

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