const app = new Vue({ el: '#app', data: { todoText: '', todos: [ { text: 'task A', done: true }, { text: 'task B', done: false }, ] }, methods: { addTodo: function() { let newTodo = this.todoText.trim(); if (!newTodo) {return;} this.todos.push( { text: newTodo, done: false } ); this.todoText = ''; } }, computed: { // アクティブなtodoを数える remaining: function() { let count = 0, todos = this.todos, length = todos.length; for (var i = 0; i < length; i++) { if (!todos[i].done) { count++; } } return count; } } });
<div id="app"> <section class="hero is-primary is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title is-capitalized">methods</h1> <p class="subtitle is-6">処理を加える</p> </div> </div> </section> <div class="section"> <div class="columns is-mobile"> <div class="column is-10-tablet is-offset-1-tablet"> <div class="box"> <p class="field"> {{remaining}} / {{todos.length}} </p> <div class="field"> <ul> <li v-for="todo in todos"> <label class="checkbox"> <input type="checkbox" v-model="todo.done"> <span v-bind:class="{'done': todo.done}"> "{{todo.text}}"</span> </label> </li> </ul> </div> <div class="field has-addons"> <div class="control"> <input class="input" v-model="todoText" placeholder="add a todo here" type="text" /> </div> <div class="control"> <button v-on:click="addTodo()" class="button is-primary">Add</button> </div> </div> </div> </div> </div> </div> </div>