【Vue.js】v-forを使ってhtml側からdataのオブジェクト(リスト)へ追加・削除・更新

追加機能

まずはオブジェクト(リスト)に要素を足す方法です。


See the Pen
rXeLEb
by りっしー (@hiwriterprogram)
on CodePen.


ここで引っかかったのは、

this.monsters.reduce(function(a,b){
//reduce以降はidの最大値を取り出す仕組み!
        return a > b.id ? a : b.id
      },0)

というコード。reduceは、配列の類型が出せるメソッドですが、

this.[配列].reduce(function(a,b){
        return a > b.id ? a : b.id
      },0)

という書き方で、配列の最大数を求めることができる決まり文句になっているようです。以下のサイトに詳しくまとめていただいていました。
JavaScriptのreduce関数の処理の流れを図解化してみる | Arrown

削除機能

以下は削除機能を持たせたものです。


See the Pen
v-forとmethodsでリストの展開 削除機能つき
by りっしー (@hiwriterprogram)
on CodePen.


spliceは、指定の番号(第一引数)から、指定の数(第二引数)分だけ削除するメソッドです。


更新機能

最後に更新機能


See the Pen
v-forで追加・削除・更新機能
by りっしー (@hiwriterprogram)
on CodePen.