Changes to properties in mounted not triggering computed in VueJS

Question

I have a VueJS component which contains a button whose class and text are computed properties and changes every time the button is clicked. They are changing fine as long as I click on the button once it is loaded. I wanted to store the state in localStorage and if I reload the page set the text and class based on the value stored. The value of ordered is changing but the button text and class are not reflecting that in UI. Does anyone have any suggestion as to what I may be doing wrong? Following is the source

<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>

Franck Abgrall · Accepted Answer · 2019-03-30 21:11:05Z

3

What you will get from the local storage is a string. In mounted, ordered property will be a string instead of a boolean so you order_button_text computed property condition will never be true. To fix this you can just convert storedState property to a boolean :

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

answered Mar 30, 2019 at 21:11

Franck Abgrall

1415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Buddha Over a year ago

Spot On. It worked Thanks. An obvious miss from my end.

Collectives™ on Stack Overflow

Changes to properties in mounted not triggering computed in VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related