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

Solution :

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