если нажать на чекбокс, то текст зачеркнется - но появляется ошибка : Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "complited"
и еще после нажатия на кнопку "добавить" зачеркнутые тексты вдруг превращаются в обычный текст(не зачеркнутый)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>планировщик задач</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.todo-list-example{
padding: 20px
}
.crossed{
text-decoration: line-through;
}
</style>
<body>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Добавить задачу</label>
<input
v-model="newtodotext"
id="new-todo"
placeholder="Например, покормить кота"
>
<button>Добавить</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li><!-- is="todo-item" всеравно что использовать todo-item, но поволяет обходить проблемы парсинга -->
{{newtodotext}}
</ul>
</div>
<script>
Vue.component('todo-item', {
template: `
<li v-bind:class="{crossed: complited}">
<input type="checkbox" v-on:change="complited = !complited" >
{{ title }}
<button v-on:click="$emit('remove')">Удалить</button>
</li>
`,
props: ['title','complited']
})
new Vue({
el: '#todo-list-example',
data: {
newtodotext: '',
todos: [
{
id: 1,
title: 'Помыть посуду',
complited: false
},
{
id: 2,
title: 'Вынести мусор',
complited:false
},
{
id: 3,
title: 'Подстричь газон',
complited:false
}
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newtodotext,
complited: false
})
this.newtodotext = ''
}
}
})
```
</script>
</body>
</html>