「Vue.js」mounted()で配列に要素を追加する

2022年3月8日

環境
Windows10 home 64bit
Vue.js 3.2.31
Google Chrome 99.0.4844.51

書式

mounted() {
  this.配列名.push(要素)
}

mountedを使用して、配列に要素を追加します。

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mountedで配列を追加するサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
      <h2>配列追加結果:{{cityArr}}</h2>
  </div>
  <script>
    const cft = {
      data() {
        return {
          cityArr: ['東京', '大阪','福岡']
        }
      },
      mounted() {
        this.cityArr.push('川崎')
      }
    }
    Vue.createApp(cft)
      .mount('#app')

  </script>
</body>
</html>

実行結果
配列追加結果:[ “東京", “大阪", “福岡", “川崎" ]というテキストが表示されます。

Vue.js

Posted by arkgame