Vue.jsで配列要素を動的に追加する方法
Vue.jsで配列要素を動的に追加したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
フルーツと値段が連想配列で定義されており、リストで表示されてます。
フォームに任意の値を入力。
ボタンを押すと、配列リストに入力された値が新たに追加されてます。
実装手順は以下の通りです。
HTMLを準備
<div id="app">
<ul>
<li v-for="item in items">
{{ item.title }}-{{ item.price }}
</li>
</ul>
フルーツ: <input v-model="additem"><br>
値段: <input v-model="addprice"><br>
<button style="margin-left: 10px;" v-on:click="add">追加</button>
</div>
まず最初にHTMLを準備します。
今回は例としてクリックイベントを行ったら、連想配列要素を追加する動的処理を紹介します。
新たな配列要素を追加する入力フォームタグ（input）にv-modelディレクティブを付与します。
クリック要素にv-on:clickディレクティブを付与します。
Vue.jsで配列要素を追加
const app = Vue.createApp({
el: "#app",
data() {
return {
//連想配列を定義
items: [
{ title: "リンゴ",price: "200円"},
{ title: "メロン",price: "500円"}
],
}
},
methods: {
//クリックしたら動的に配列要素を追加
add: function (event) {
this.items.push({ title: this.additem, price: this.addprice });
},
},
});
app.mount("#app");
Vue.jsで配列要素を追加するコード例です。
データメソッドにはあらかじめ連想配列を定義。
methodsオプション内にv-on:clickディレクティブに設定した値で関数を作成。
関数内でpushメソッドを定義。
引数に前章の入力フォームタグで指定したv-modelディレクティブの値を追加する要素数分、指定します。
以上で実装完了です。
まとめ
Vue.jsで配列要素を動的に追加する方法について紹介しました。
以上で解説を終わります。
目次