【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は、指定の番号(第一引数)から、指定の数(第二引数)分だけ削除するメソッドです。