問題
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を参考にしよう。
