Vue.jsでTodoリスト

DEMO

デモサイト

完成形

html

    <div id="app">
      <h2>TODO List</h2>
      <form v-on:submit.prevent>
        <input type="text" v-model="newItem" />
        <button @click="addItem()">Add</button>
      </form>
      <ul>
        <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 @click="deleteItem(index)">Delete</button>
        </li>
      </ul>
      <pre>
        {{$data}}
      </pre>
    </div>

JavaScript

const app = Vue.createApp({
  data: () => ({
    newItem: "",
    todos: [],
  }),
  methods: {
    addItem: function (event) {
      console.log("click");
      if (this.newItem === "") return;
      let todo = {
        item: this.newItem,
        isDone: false,
      };
      this.todos.push(todo);
      this.newItem = "";
    },
    deleteItem: function (index) {
      // console.log("Delete");
      // console.log(index);
      this.todos.splice(index, 1);
    },
  },
});
app.mount("#app");

コード解説

追加ボタンhtml

      <form v-on:submit.prevent>
        <input type="text" v-model="newItem" />
        <button @click="addItem()">Add</button>
      </form>

<form v-on:submit.prevent>

v-on:submit.prevent
formのデフォルトの処理をやめさせる

<input type="text" v-model="newItem" />

  data: () => ({
    newItem: "",
    todos: [],
  }),

newItemで初期値を空にする、v-modelでデータバインディング
todosで配列を用意する

<button @click="addItem()">Add</button>

on:clickでクリックしたときの処理

  methods: {
    addItem: function (event) {
      console.log("click");
    },
  },

//コンソールログ
click

      let todo = {
        item: this.newItem,
      };

オブジェクトtodoを作成

this.todos.push(todo);

detaに用意したtodosにtodoにpushする

      if (this.newItem === "") return;

入力値が空の時は処理させない

        <li v-for="todo in todos">
          <span>{{todo.item}}</span>
        </li>

v-forでtodosをlist表示させる(todo.item)

          <input type="checkbox" v-model="todo.isDone" />

処理・未処理を判定させるためにチェックボックスを追加

      let todo = {
        item: this.newItem,
        isDone: false,
      };

isDoneを追加、初期値false

          <input type="checkbox" v-model="todo.isDone" />

v-model="todo.isDone"
チェック時:tlue
未チェック時:false

<span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>

v-bind:classでチェック時に.done付与

#app li > span.done {
  text-decoration: line-through;
}

チェックが入ってる時(.doneクラス付与時)にitemに横線を引くcss

this.newItem = "";

Addした後にinputを空にする

<button @click="deleteItem()">Delete</button>

Deleteボタン作成

    deleteItem: function (index) {
       console.log("Delete");
       console.log(index);
    },

引数にindexをとる
indexで何番目のitemがチェックされたかを判断

        <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 @click="deleteItem(index)">Delete</button>
        </li>

v-forの引数にindex追加

this.todos.splice(index, 1);

spliceで配列から削除させる
index番目を一つ削除

DEMO

デモサイト