vueでtodoapp作ったよ

Javascriptだけで作ってたTodoアプリですが、今度はvue.jsを使って作りました。めちゃくちゃ楽でした🥺

挙動について

こちらでは、activeのみを表示させた時にステータスを変更したときは、activeのみ表示のままステータスを変更可能。activeのみ表示のときに追加、削除してもactiveのみの表示から移動せず、そのまま削除される仕様。

コード

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

上のリンクは実際に動くjsfiddleのもの

<div id="app" class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Todo App</div>

        <div class="card-body">
          <input v-model="title" id="todovue-title" class="todovue-input" type="text" name="" value="">
          <input v-on:click="add" id="button" type="button" name="button" value="追加">

          <ul>
            <li :class="{ none: todo.view == false }" v-for="(todo, index) in todos">
              <input @change="status(index)" type="checkbox" name="status" :checked="todo.status">
              <span :class="{ completed: todo.status }">{{ todo.title }}</span>
              <button v-on:click="sakujo(index)" type="button" name="button">削除</button>
            </li>
          </ul>

          <div>
            <input type="radio" id="all" name="todo" value="all" v-on:change="change" checked>
            <label for="all">all</label>
          </div>

          <div>
            <input type="radio" id="active" name="todo" value="active" v-on:change="change">
            <label for="active">active</label>
          </div>

          <div>
            <input type="radio" id="completed" name="todo" value="completed" v-on:change="change">
            <label for="completed">completed</label>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

javascript

var app = new Vue({
  el: '#app',

  data: function() {
    return {
      title: '',
      todos: [
        // {title: 'やること１', status: false, view: true},
        // {title: 'やること２', status: false, view: true},
        // {title: 'やること３', status: false, view: true},
      ]
    }
  },

  methods: {

    add() {
      var todo = {
        title: this.title,
        status: false,
        view: true
      };

      this.todos.push(todo);
      this.title = '';
    },

    sakujo(index) {
      this.todos.splice(index, 1)
    },

    status(index) {
      if (this.todos[index].status == true) {
        this.todos[index].status = false
      } else if (this.todos[index].status == false) {
        this.todos[index].status = true
      }
    },

    change(event) {
      if (event.target.value == 'all') {

        for (var i = 0; i < this.todos.length; i++) {
          this.todos[i].view = true
        }

      } else if (event.target.value == 'active') {

        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].status == true) {
            this.todos[i].view = false
          }

          if (this.todos[i].status == false) {
            this.todos[i].view = true
          }
        }

      } else if (event.target.value == 'completed') {

        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].status == true) {
            this.todos[i].view = true
          }

          if (this.todos[i].status == false) {
            this.todos[i].view = false
          }
        }
      }
    }
  },
})

css

.todovue-input {
  width: 100%;
}

ul {
  list-style: none;
}

.completed {
  text-decoration: line-through;
}

.none {
  display: none;
}