Сохранение состояния текста кнопки после обновления страницы sh с использованием Vue. js и локального хранилища

Question

Я работаю над списком задач, используя Vue. js компонент и Laravel, с кнопкой, чтобы пометить каждую отдельную задачу как «выполненную» или «незавершенную». В настоящее время я даже не могу заставить его изменить состояние, не говоря уже о том, чтобы поддерживать его после обновления страницы sh. В журнале консоли написано [Vue warn]: Ошибка в подключенном хуке: «Ошибка типа: в строгом режиме не допускается назначение свойств только для чтения».

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>

Answer 1

Вы присваиваете item2 как item prop, и это только для чтения, поскольку оно передается как свойство, поэтому item2 сохраняет ссылку на тот же объект только для чтения.

Вы можете просто использовать синтаксис расширения или Object.assign метод для создания нового объекта.

item2: {...this.item}

ОБНОВЛЕНИЕ: Как вы прокомментировали, если это строка JSON, просто проанализируйте ее и сохраните как item2.

item2: JSON.stringify(this.item)