vue.js methods

by uto usui

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
<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>

SCSS

.done {
	text-decoration: line-through;
	color: grey;
}

Babel + JSX

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;
		}
	}
});