Written by Kasumi

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で配列要素を動的に追加する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

Vue.jsでWordPressから新着記事一覧を取得・外部サイトに表示する方法

2022.09.20
2428
Vue.js

Vue.jsでslideDownとslideUpするアニメーションを実装する方法

2022.09.23
2458
Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
5351
Vue.js

Vue.jsでスムーススクロールを実装する方法【vue-scrolltoライブラリを使おう】

2022.09.04
5039