vue.jsのメソッドでpushを使った際にpush is not a functionのエラーの解決方法を教えてください。
Q&A
Closed
解決したいこと
javascriptのpushで以下エラーが出ます。
解決方法を教えて下さい。
発生している問題・エラー
出ているエラーメッセージを入力
Uncaught TypeError: this.list.push is not a function
at Vue.addToDo (main.js:25)
at click (eval at createFunction (vue.js:10667), <anonymous>:3:452)
at invoker (vue.js:2029)
at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1828)
状況
メソッドでCheckedを入れる前まではうまく動作していました。
該当するソースコード
<body>
<div id="app">
<span>{{ `残タスク数:${counter}/${Object.keys(list).length}` }}</span><br>
<input type="text" v-model="addText" placeholder="ToDoを入力して">
<button v-on:click="addToDo()">追加</button>
<button v-on:click="deleteBtn()">削除</button><hr>
<ul v-if="list.length">
<ul v-for="todo in list">
<li>
<span v-bind:class="{ done: todo.isChecked }">
<input type="checkbox" v-model="todo.isChecked" v-on:change="Checked()">{{ todo.text }}
</span>
</li>
</ul>
</ul>
<ul v-else>
<span>現在タスクはありません</span>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
var app = new Vue({
el: '#app',
data: {
list: [],
addText: '',
counter: 0,
},
//watchでlistの変更を監視
watch: {
list: {
handler: function() {
//localStorageにデータを保存
localStorage.setItem("list", JSON.stringify(this.list));
},
deep: true
}
},
//マウントされた時にlocalStorageからデータを取得
mounted: function() {
this.list = JSON.parse(localStorage.getItem("list")) || [];
},
methods: {
addToDo: function() {
if (this.addText !== '') {
this.list.push({
text: this.addText,
isChecked: false,
});
}
this.addText = '';
},
deleteBtn: function() {
this.list = this.list.filter(function(todo) {
return !todo.isChecked;
});
},
Checked: function(){
this.list.filter(function(todo){
if(todo.isChecked === true)
counter++;
});
}
}
});
0
