テキストに文字を打ちボタンをクリックすると、配列に追加されるようにしたいです。今あるコードですと、テキストに入力した文字が、add function()のpush()の中で追加ができていません。ここで追加するやり方を教えていただきたいです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
sample
</title>
<link rel="stylesheet" href="style.css">
<script src="https://gstatic.com/charts/loader.js"></script><!-- type="text/javascript" はなくても動く?-->
</head>
<body>
<h3>好きなプログラミング言語投票</h3>
<div id="chart_div" style="height: 500px;"></div>
<div id="app">
<li v-for="(item,c) in dataArray" v-if="c>0">{{item[0]}} : {{item[1]}}
<button v-on:click="addOne(c)"> 一票</button>
</li>
<li><input type="text" v-model="myText" size="5"> <button v-on:click="add">追加</button></li>
</div>
<script>
//グラフに使うデータ
var orgdata = [
['言語', '票数'],
['Java', 1], ['C', 1]
];
google.charts.load('current', { packages: ['corechart']});
google.charts.setOnLoadCallback(drawBasic);
//グラフを表示数関数
function drawBasic() {
var data = google.visualization.arrayToDataTable(orgdata);
var options = {title: '好きなプログラミング言語',"is3D": true};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
dataArray:orgdata,
myText:""
},
methods:{
addOne: function(val){
var obj = this.dataArray[val];
obj[1]++;
this.dataArray.splice(val,1,obj);
drawBasic();
},add: function () {//配列に追加するときのメソッド
this.orgdata.push([this.myText,1]);//TODO
}
}
});
</script>
</body>
</html>