【Vue.js】１番シンプルなToDoリスト

まずは完成品 ✏️

See the Pen TodoList_Vue by アズマックス (@yuki-azuma) on CodePen.

　
　

機能要件 🤖

• テキストボックスに文字を入力して、addボタンを押すと下に入力した文字が表示される
• 表示された文字の左側に、チェックボックス、右側にdeleteボタンが表示される
• チェックボックスにチェックが入ると、Todoに取り消し線が入る
• deleteボタンが押されると、そのToDoが消える
• テキストボックスが空の場合は、addボタンを押しても何も追加されない 　 　

スコープ外の機能 ❌

• ブラウザをリロードした場合のデータ保持機能
• 文字入力のバリデーション 　 　

作成のポイント🙋‍♂️

• addボタンのクリックイベント
  • ①：クリックされたら、addItemのfunctionが発動。入力した文字を配列(todos)に格納→格納した配列をView側で表示する（双方向バインディング）
  • ②：todoにvindされたnewItem(入力された文字列)とisDone(チェック状態）を格納
  • ③：vindされたtodos（配列）にtodoを格納する

new Vue({
  // 省略
  data: {
    newItem: "",
    todos: []
  },

  methods: {
    // ①クリックで発動
    addItem: function() {
      // ②入力された文字列とチェック状態を格納 
      var todo = {
        item: this.newItem,
        isDone: false
      }
      // ③todosに格納
      this.todos.push(todo)
    // 以下省略
    }
  }
})

　

• deleteボタンのクリックイベント
  • ①：クリックされたら、delItemのfunctionが発動。引数は、delが押されたtodosのindex番号を格納
  • ②：todosのindex番号に格納されているデータを削除する

new Vue({
  // 省略
  data: {
    todos: []
  },
  methods: {
    // ①クリックで発動
    delItem: function(index) {
      // ②todosから該当のデータ（index番号のデータ）を削除する
      this.todos.splice(index, 1)
    }
  }
})

　

• チェックボックスのチェック
  • v-modelを使い、チェックが入ったらtrue、入っていない場合はfalseと切り替える
  • trueの場合は、v-bind classを使い、classを追加し、取り消し線を表示する

<li v-for="(todo, index) in todos">
   <input type="checkbox" v-model="todo.isDone">
      <span v-bind:class="{done: todo.isDone}">{{ todo.item }}</span>
      <button v-on:click="delItem(index)">Delete</button>
</li>

　

感想 🍵

• 直感的でわかりやすい！
• これがコンポーネントとか複数Vueファイルにまたがってくると思うと・・・大変なんだろうなと思う
• それなくJavaScriptの基礎は覚えておかないと、全然頭に入ってこないなーと思う
• 次はコンポーネントを交えた何かを作ってみようかな。