Maintaining button text state after page refresh using Vue.js and local storage

Question

I am working on a task list using Vue.js component and Laravel, with a button to mark each individual task as "complete" or "incomplete". At the moment I can't even get it to change state, let alone maintain it after the page refresh. The console log says [Vue warn]: Error in mounted hook: "TypeError: Assignment to read-only properties is not allowed in strict mode".

CompleteButton.vue

<template> <button type="button" @click="on_order_button_click()"> {{ buttonText }} </button> </div> </template> <script> export default { props: ['userId', 'item'], required: true, data() { return { item2: this.item } }, methods: { on_order_button_click() { this.item2.is_complete = !this.item2.is_complete; localStorage.setItem(this.item2.id, this.item2.is_complete); } }, mounted() { var storedState = localStorage.getItem(this.item2.id); if (storedState) { this.item2.is_complete = storedState; } }, computed: { buttonText() { return this.item2.is_complete === true ? "Completed" : "Incomplete"; } } }; </script>

index.blade.php

 <complete-button user-id="{{ $user->id }}" item="{{ $item}}"></complete-button>

Pranav C Balan · Accepted Answer · 2020-04-05 02:34:09Z

You are assigning item2 as item prop and which is readonly since it's passed as a property so item2 keeping reference to the same readonly object.

You can simply use spread syntax or Object.assign method to create a new object.

item2: {...this.item}

UPDATE : As you commented, If it's a JSON string then simply parse it ans keep it as item2.

item2: JSON.stringify(this.item)

Thanks for your answer. If I try and pass "item" as an object I get [Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got String with value "{"id":3,... in the console log

Collectives™ on Stack Overflow

Maintaining button text state after page refresh using Vue.js and local storage

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related