Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox ESRです。
特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。
下記はソースコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">
Add
</button>
</form>
<ul>
<li v-for="todo in todos"></li>
<input type="checkbox">
<span>{{ todo.item }}</span>
</ul>
<pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue ({
el: '#app',
data: {
newItem: '',
todos: []
},
methods: {
addItem: function(event) {
// alert();
if(this.newItem == '') return;
var todo = {
item: this.newItem
};
this.todos.push(todo);
this.newItem = '';
}
}
})
teratailにもマルチポストさせていただいておりますので、ご容赦くださいませ。
@supa さんからのコメントを受けてFirefoxのConsoleを見ましたが、以下3つのエラーメッセージが出ていました。
[Vue warn]: Property or method "todo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
[Vue warn]: Error in render: "TypeError: todo is undefined"
(found in <Root>) vue.js:634:17
TypeError: "todo is undefined"