Vue.js ネコ本チュートリアルのToDoリストを少しアレンジしてみた

はじめに

最近Vue.jsの学習を始めたので、アウトプットがてらToDoリストを作成してみました。
※プログラミングの勉強を始めて3か月ほどなので突っ込みどころありましたらご教授いただけますと幸いです。

自作したToDoリスト

以下が、自作したToDoリストです。

自作ToDoリスト
勉強がてらデザインにはBootstrapを使用してみました。

参考

参考にさせていただいたのは以下のチュートリアルです。
ToDoリストを作りながら学習しよう！

個人的にはVue.jsを学ぶ上で大変お世話になっている本(通称ネコ本)です。

Let's アレンジ

アレンジがカタカナになってるのは見栄えです。(センス・・・)

本チュートリアルでは、状態が完了と着手中の2パターンの切り替えになってるところを、
アレンジ精神で3パターンの切り替えにしたいなと思い保留を追加してみました。

具体的に変更したところは2点。

①使用するデータを追記

変更前

main.js

  data: {
    todos: [],
    current: -1,
    options: [
      { value: -1, label: 'すべて' },
      { value: 0, label: '作業中' },
      { value: 1, label: '完了' }
    ]
  },

⇓⇓⇓

変更後

main.js

  data: {
    todos: [],
    current: -1,
    options: [
      { value: -1, label: 'すべて'},
      { value: 0, label: '着手'},
      { value: 1, label: '完了'},
      { value: 2, label: '保留'}
    ]
  },

※個人的に扱いやすいように数字を変更してます。

②メソッドを変更する

main.js

    doChangeState: function (item) {
      item.state = !item.state ? 1 : 0
    },

⇓⇓⇓

変更後

main.js

    doChangeState: function(item){
      if(2 > item.state){
        item.state = item.state + 1
      } else {
        item.state = 0
      }
    },

三項演算子から条件分岐に変更しました。

JavaScript初心者なので、三項演算子だとわかるまでめちゃくちゃ理解に苦しみました。
(もう少し基礎を学んだほうがいいのは間違いない・・・)

補足

三項演算子は以下の形で条件式がtrueなら式1をfalseなら式2を返します。

条件式 ? 式1 : 式2 

まとめ

Laravelを学んでいく中でフロントサイドでVue.jsを使ってみたくなり学び始めました。

両FWともに様々なチュートリアルがありますが、アレンジ～自作ポートフォリオ完成までには、
しっかり1つ1つのスクリプトの意味を理解していかなければいけないと痛感しました。

引き続きアウトプットしながら学習をしていきたいと思います。
拙いアウトプットですがどなたかの参考になりましたら幸いです。