todo

2019-11-09 20:23:09 +01:00 · 2019-11-09 20:23:09 +01:00 · f5a209ca1b
parent 22129d13ab
commit f5a209ca1b
2 changed files with 64 additions and 0 deletions
--- a/todo/app.js
+++ b/todo/app.js
@ -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 = ''
+    }
+  }
+})
--- a/todo/index.html
+++ b/todo/index.html
@ -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>