Зачем отдельный массив checked? Пусть notes вместо массива строк будет массивом объектов, состоящих из двух свойств - text и checked. Наблюдатель c
deep: true
, сохраняющий данные в localStorage уже есть, так что никаких дополнительных действий предпринимать не придётся.
UPD. Как это может выглядеть:
<div id="app">
<div>
<input v-model="newTaskText" @keypress.enter="addTask">
<button @click="addTask">add</button>
</div>
<hr>
<ol v-if="tasks.length">
<li v-for="(n, i) in tasks">
<label :class="{ 'task-checked': n.checked }">
<input type="checkbox" v-model="n.checked">
{{ n.text }}
</label>
<button @click="delTask(i)">del</button>
</li>
</ol>
<strong>Total: {{ tasks.length || 'no tasks fucking exist' }}</strong>
</div>
.task-checked {
text-decoration: line-through;
}
Vue.createApp({
data: () => ({
newTaskText: '',
tasks: JSON.parse(localStorage.getItem('tasks')) ?? [],
}),
watch: {
tasks: {
deep: true,
handler: val => localStorage.setItem('tasks', JSON.stringify(val)),
},
},
methods: {
addTask() {
const text = this.newTaskText.trim();
if (text) {
this.tasks.push({
text,
checked: false,
});
this.newTaskText = '';
} else {
alert('fuck off');
}
},
delTask(index) {
if (confirm('really?')) {
this.tasks.splice(index, 1);
}
},
},
}).mount('#app');