Vue.jsの配列の要素の追加・変更・削除方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsの配列の要素の追加・変更・削除方法について、簡単に解説していきます。

配列の要素の追加

Vue.jsで配列の要素を追加する方法は簡単です。

通常のJavaScriptと一緒でpushメソッドを使うだけです。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      names: []
    }
  }
});

app.names.push('田中')

上記のコードでは、appのnamesに「田中」という要素を追加しています。

配列の要素の変更

配列の要素の変更では注意が必要です。

通常のindexを指定する代入式ではリアクティブにならないためです。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      names: ['山田']
    }
  }
});

app.names.splice(0, 1, '田中')

spliceメソッドを使う方法が正しく、上記の例では、appのnamesのindexが0の要素を「田中」に変更しています。

配列の要素の削除

配列の要素の削除も変更と同じです。

すなわち、spliceメソッドを使って削除します。

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      names: ['山田', '田中']
    }
  }
});

app.names.splice(1, 1)

上記のコードの例では、appのnamesのindexが1の要素を削除しています。