Vueで配列へ要素を追加する際の書き方を教えていただきたいです。テキストエリアに入力して、ボタンを押すと関数が動いて配列に追加されるようにしたいのですが、テキストエリアに入力されたものを変数にいれて、そのあと配列にいれるという記述方法がわかりません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Vue.js sample
</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
なまえ:<textarea v-model="myText"></textarea>
とし:<textarea v-model="myTExt"></textarea>
たんとー:<textarea v-model="myTEXt"></textarea>
<button v-on:click="addList">あdd</button>
<li v-for="t in array">{{t.n}} {{t.a}} {{t.i}} </li>
</div>
<script>
new Vue({
el: "#app",
myText:"",
myTExt:"",
myTEXt:"",
data: {
array:[
{n:"名前1",a:20,i:"Java"},
{n:"名前2",a:12,i:"C"},
{n:"名前3",a:21,i:"Python"}
]
},methods: {
addList: function () {
this.array.push({n:myText,a:myTExt,i:myTEXt});
}
}
})
</script>
</body>
</html>