code
/
vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

todo

This commit is contained in:
Sergio Álvarez 2019-11-09 20:23:09 +01:00
parent 22129d13ab
commit f5a209ca1b
2 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
todo/app.js Normal file
View File

@ -0,0 +1,32 @@
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
{ id: 1, title: 'Do the dishes' },
{ id: 2, title: 'Take out the trash' },
{ id: 3, title: 'Mow the lawn' }
],
nextTodoId: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})

32
todo/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todo</title>
<script src="https://vuejs.org/js/vue.js"></script><!-- dev version -->
</head>
<body>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat">
<button>Add</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>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>