Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="app">
- <h1>{{ message }}</h1>
- <form v-on:submit.prevent="addNewTodo">
- <input type="text" v-model="todo.task">
- <button type="submit">Add todo</button>
- </form>
- <ul>
- <li v-for="todo in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
- {{ todo.task }} <span v-on:click="deleteTodo">{{ todo.delete }}</span>
- </li>
- </ul>
- </div>
- var app = new Vue({
- el: '#app',
- data: {
- message: 'List of things to do today',
- todos: [
- { task: 'Have breakfast', delete:'(x)'},
- { task: 'Go to the gym', delete:'(x)'},
- { task: 'Study Vuejs', delete:'(x)'}
- ],
- todo: {task: '', delete: '(x)'}
- },
- methods: {
- addNewTodo: function(){
- this.todos.push( this.todo );
- },
- deleteTodo: function(){
- this.todos.shift( this.todo )
- },
- }
- });
Add Comment
Please, Sign In to add comment