問題

4
Vue.js

配列にデータを追加しよう!

Vue.jsの問題に挑戦しよう!

問題

配列にデータを追加しよう!

Vueで配列を操作してみよう。
Jobsという配列のデータを用意し、入力した値が新しくJobsに追加されるようにしてほしい。
配列に値を追加するにはJavaScriptのpush関数を用いよう。

あらかじめエディタに書くコード

                    <div id="app">
  <div>
    <ul>
      <li v-for="job in jobs" :key="job.key">
        {{ job.name }}
      </li>
    </ul>
  </div>
  <form v-on:submit.prevent="addJob">
    <input type="text" v-model="newJobName">
    <input type="submit" value="タスクを完了する">
  </form>
</div>
¥Vue¥
                

期待する画面

解答と解説(配列にデータを追加しよう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まず'li'タグと'v-for'を用いて配列データ'Jobs'の中身を表示させているぞ。
次に'v-model'を用いることで、入力した値と
'newJobName'というデータを結びつけることができる。
最後に'v-on:click'で'addJob'メソッドを呼び出し、
'push()'で'Jobs'に追加するという流れだ。
追加した後に'newJobName'を空にすることに注意しよう。
'v-for'についてはその6、'v-on:click'についてはその7、
'v-model'についてはその11を参考にしよう。

さらにスキルアップしたい方は公式LINEから「Vue.js」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断