frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.jsで超簡単でシンプルなTODOリストをレシピのようにわかりやすく解説

スポンサードリンク


スポンサードリンク


下記のようなTODOリストを作りましたのでわかりやすく解説します。

※元となるソース


See the Pen
BMJrdz
by funclur (@funclur)
on CodePen.


<div id="app">
    <input type="text" v-model="inputText">
    <button type="submit" v-on:click="save">保存</button>
    <ul>
        <!--   v-for は現在のアイテムに対する配列のインデックスを、任意の2つ目の引数としてサポートしています。   -->
        <li v-for="(todo, index) in todos">{{ todo.text }} <button type="submit" v-on:click="remove(index)">削除</button></li>
    </ul>
</div>
new Vue({
  el: '#app',
  data: {
    inputText: 'text',
    todos: [
      {text: '起きる'},
      {text: 'ご飯を食べる'},
      {text: '寝る'}
    ]
  },
  methods: {
    save: function(){
      this.todos.push({text: this.inputText}); 
    },
    remove: function(index){
        // todos配列からindex番目を1取り除く
        this.todos.splice(index, 1);
    } 
  } 

})

仕様

  • 入力フォームからTODOを入力
  • ボタンでTODOリストにTODOを追加
  • ボタンでTODOを削除

STEP1

まずは入力フォームからTODOを入力から作ります。
htmlに記述するのは①対象となる範囲の要素(この場合は#app)、②ディレクティブ(この場合はv-model)です。

<div id="app">
    <input type="text" v-model="inputText">
</div>

上記でVueを①動かす範囲、データバインディングするためのinput要素を用意し、v-modelを付与します。

new Vue({
  el: '#app',
  data: {
    inputText: 'text',
  }
})

JSにはelに対象となる範囲の要素、dataにinputTextというkeyとtextという初期値を与えます。

STEP2

<div id="app">
    <input type="text" v-model="inputText">
    <ul>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
</div>

v-forは繰り返しのディレクティブです。

  • {{ 配列のkey(単数).配列の中のkey }}
  • という形にします。
    ちょっとわかりづらいので下で解説します。

    new Vue({
      el: '#app',
      data: {
        inputText: 'text',
        todos: [
          {text: '起きる'},
          {text: 'ご飯を食べる'},
          {text: '寝る'}
        ]
      }
    })
    

    todosというkeyに連想配列を付与します。
    連想配列とは配列の中にkeyと値が含まれるもののことです。
    つまりtodosが配列全体を取得するためのkey、textは配列の中の値を取得するためのkeyです。
    この場合textが配列の中のkeyでhtmlに記述した{{ todo.text }}と合わせる必要があります。
    これでリストの表示が完成したと思います。

    STEP3

    <div id="app">
        <input type="text" v-model="inputText">
        <button type="submit" v-on:click="save">保存</button>
        <ul>
            <li v-for="todo in todos">{{ todo.text }}</li>
        </ul>
    </div>
    

    保存ボタンの要素を作成し、v-on:clickというディレクティブを与えます。
    これがクリックイベントになります。saveは関数になります。

    new Vue({
      el: '#app',
      data: {
        inputText: 'text',
        todos: [
          {text: '起きる'},
          {text: 'ご飯を食べる'},
          {text: '寝る'}
        ]
      },
      methods: {
        save: function(){
          this.todos.push({text: this.inputText}); 
        }
      } 
    
    })
    

    関数はmethodsになります。thisでdataの中のkeyを取得できます。
    pushで配列に入れます。textはtodosの中のkeyですね。
    これでリストの追加ができました。

    STEP4

    <div id="app">
        <input type="text" v-model="inputText">
        <button type="submit" v-on:click="save">保存</button>
        <ul>
            <!--   v-for は現在のアイテムに対する配列のインデックスを、任意の2つ目の引数としてサポートしています。   -->
            <li v-for="(todo, index) in todos">{{ todo.text }} <button type="submit" v-on:click="remove(index)">削除</button></li>
        </ul>
    </div>
    

    v-forは第二引数にindexを与えることが可能です。
    これによりリスト要素の何番目かを取得できます。()はなしでもOKです。
    remove(index)で削除する項目が何番目かの情報を与えます。

    new Vue({
      el: '#app',
      data: {
        inputText: 'text',
        todos: [
          {text: '起きる'},
          {text: 'ご飯を食べる'},
          {text: '寝る'}
        ]
      },
      methods: {
        save: function(){
          this.todos.push({text: this.inputText}); 
        },
        remove: function(index){
            this.todos.splice(index, 1);
        } 
      } 
    
    })
    

    methodsの中にremove関数を追加します。
    配列.splice(数値, 1)で 配列から数値番目を1取り除くという処理になります。
    つまりここではtodos配列からindex番目を消します。

    これでTODOリストを削除できました。

    以上が、Vue.jsで超簡単でシンプルなTODOリストをつくるでした。