The local storage should store the state only for the task where the completed button has been pressed. At present, when I refresh the page, all tasks are shown as completed.
<template>
<button type="button" v-bind:class="order_button_style" @click="on_order_button_click()">
{{ buttonText }}
</button>
</div>
</template>
<script>
export default {
props: 'itemId', required: true,
data() {
return {
index: 'this.itemId',
status: ''
}
},
methods: {
on_order_button_click() {
this.status = !this.status;
localStorage.setItem('index', this.status);
}
},
mounted() {
this.status = localStorage.getItem('index') === "true";
},
computed: {
buttonText() {
return this.status === true ? "Completed" : "Complete";
},
order_button_style() {
return this.status === true
? "btn btn-danger"
: "btn btn-primary";
}
}
};
</script>