Vue
LINEでログイン
Googleでログイン
Twitterでログイン問題4：配列にデータを追加しよう！
Vueで配列を操作してみよう。
Jobsという配列のデータを用意し、入力した値が新しくJobsに追加されるようにしてほしい。
配列に値を追加するにはJavaScriptのpush関数を用いよう。
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¥
期待する画面
解答ソースコード
<script>
const vm = new Vue({
el: "#app",
data: {
jobs: [
{ name: "Engineer" },
{ name: "Programmer" },
{ name: "DataAnalyst" }
],
newJobName: ""
},
methods: {
addJob() {
this.jobs.push({
name: this.newJobName
});
this.newJobName = "";
}
}
});
</script>
¥Vue¥
完了にする！
活動記録をTweetする
次に'v-model'を用いることで、入力した値と
'newJobName'というデータを結びつけることができる。
最後に'v-on:click'で'addJob'メソッドを呼び出し、
'push()'で'Jobs'に追加するという流れだ。
追加した後に'newJobName'を空にすることに注意しよう。
'v-for'についてはその6、'v-on:click'についてはその7、
'v-model'についてはその11を参考にしよう。