Todo list на Vue - Не могу решить вопрос с checbox "checked"
Ну история такая, реализация простого todo list, но все разбито на компоненты (Ну да это и не так важно).
Вот что-то не могу придумать как это реализовать, чтобы статус checked, сохранялся у checkbox.
На картинке видно, что после того как одной заметке поставлен статус completed он зачеркивается и Все сохраняется в Localstoreg. Но статус checkbox сбрасывается
Родитель ловит событие @confirm-todo="confirmTodo"
<div class="todo-body">
<ul class="todo-body__list">
<TodoElement
v-for="(todo, i) of todos"
:key="todo.id"
:todo="todo"
:index="i"
@delete-todo="deleteTodo"
@confirm-todo="confirmTodo"
></TodoElement>
</ul>
</div>
Вот есть todo элемент
<template>
<li class="todo-element">
<span class="todo-info">
<input type="checkbox" class="todo-check" @change="confirmTodo">
<strong> {{ index + 1 }} :</strong>
<p class="todo-text" :class="{done: todo.completed}">Title: {{ todo.title }} </p>
</span>
<div>
<Button class="todo-button__edit">
<template>Edit</template>
</Button>
<FunctionsButton class="todo-button__delete" @click="deleteTodo">
<template>Delete</template>
</FunctionsButton>
</div>
</li>
</template>
Вот полетел $emit метод изменения статуса 'confirmTodo'
methods: {
deleteTodo () {
this.$emit('delete-todo')
},
confirmTodo () {
this.todo.completed = !this.todo.completed
this.$emit('confirm-todo')
}
}
Ну и как говорил ранее что у родителя ловлю))
И делаю вот такую жесть с ним))
saveLocalStorageTodos() - Функция запись в LocalStorage
confirmTodo () {
this.todos.includes({
completed: true
})
this.saveLocalStorageTodos()
}
Вот такие дела, хотелось бы как-то сохранять статус checkbox в localStorag, но не могу придумать как
Разбередил примеры многих todo, но чет не смог примерить(
как то нужно прикрутить watch походу, но опыта у меня совсем мало. Вот и тут уперся чет.
Буду рад любой подсказке.
Ну и если что, вот ссылка на репу: https://github.com/PIPSKVIK/My-todo
Всем хорошего дня!!!