Vue.component('todo-item', {
template: '\
<li>\
<input type="checkbox" v-model="isChecked" />\
<button v-on:click="$emit(\'remove\')">Delete</button>\
<button v-on:click="$emit(\'edit\')">Edit</button>\
{{ content }}\
</li>\
',
props: ['content', 'isChecked']
})
var app = new Vue({
el: '#app',
data: {
"todo": {
isChecked: true
},
"todos": [{
id: 1,
isChecked: true,
content: "hahaha"
},
{
id: 2,
isChecked: false,
content: "hohoho"
}
],
"counter": 3
},
methods: {
addNewTodo: function() {
if (this.todo.id != undefined) {
this.todos.filter(t => t.id === this.todo.id).content = this.todo.content;
this.todos.filter(t => t.id === this.todo.id).content = this.todo.isChecked;
} else {
this.todos.push({
id: this.counter++,
content: this.todo.content,
isChecked: this.todo.isChecked
})
}
this.clear();
},
edit: function(todo) {
this.todo = todo;
console.log(todo);
},
clear: function() {
this.todo.content = '';
this.todo.isChecked = true;
this.todo.id = undefined;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form v-on:submit.prevent="addNewTodo">
<input type="checkbox" id="checkbox" v-model="todo.isChecked" />
<label for="checkbox">Done</label>
<input v-model="todo.content" placeholder="edit me" />
<button type="button" @click="clear">Clear</button>
</form>
<ul>
<li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.content" v-on:remove="todos.splice(index, 1)" v-on:edit="edit(todo)"></li>
</ul>
</div>
