마운트된 속성 변경 사항이 VueJ에서 트리거되지 않음s

마운트된 속성 변경 사항이 VueJ에서 트리거되지 않음s

VueJS 컴포넌트는 클래스 및 텍스트가 계산된 속성으로 버튼을 클릭할 때마다 변경됩니다.로딩 후 버튼을 클릭하기만 하면 정상적으로 변경됩니다.localStorage에 상태를 저장하고 페이지를 새로고침하면 저장된 값에 따라 텍스트와 클래스를 설정합니다.주문된 값은 변경되지만 버튼 텍스트와 클래스가 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>

로컬 스토리지에서 얻을 수 있는 것은 문자열입니다.탑재 시,ordered속성이 부울 대신 문자열이 되므로order_button_text계산된 속성 조건은 절대 참이 되지 않습니다.이 문제를 해결하려면 변환만 하면 됩니다.storedState속성을 부울로 설정합니다.

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

언급URL : https://stackoverflow.com/questions/55435514/changes-to-properties-in-mounted-not-triggering-computed-in-vuejs