I am creating a to-do list in Vue.js, but when I started the VSCode Live Server, it suddenly stopped working.The browser is Firefox ESR.
There is no particular error message.How can it be reflected in the browser after starting Live Server?Please let me know.
Below is the source code.
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divid="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>
<liv-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;
vartodo = {
item —This.newItem
};
This.todos.push(todo);
This.newItem=';
}
}
})
Please forgive me for multiposting the teratail as well
After receiving comments from @supa, I looked at Firefox's Console and found the following three error messages.
[Vue warn]: Property or method "todo" is not defined on the instance but referred during render. Make sure that this property is reactive, ether 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"
If you read the HTML below, you can see that three elements are generated:
todosinputelementtodoElement spanwith the value of the item property of the object as content<lib-for="todo in todos"></li>
<input type="checkbox">
<span>{{todo.item}}</span>
If you read the JavaScript code with this in mind, you can see that there is no todo object with the item property.Therefore, you can resolve this error by correcting it as follows:
var app = new Vue({
el: '#app',
data: {
newItem:',
todos: [ ],
todo: {//adding
item: "item"
},
},
methods: {
addItem: function(event){
if(this.newItem==')return;
vartodo = {
item —This.newItem
};
This.todos.push(todo);
This.newItem=';
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<divid="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>
<liv-for="todo in todos"></li>
<input type="checkbox">
<span>{{todo.item}}</span>
</ul>
<pre>{{$data}}</pre>
</div>In fact, I think you want to insert the value of the todos array into the span element, so the li element's exit tag should be positioned as shown below, and the element. var app = new Vue({
el: '#app',
data: {
newItem:',
todos: [ ],
},
methods: {
addItem: function(event){
if(this.newItem==')return;
vartodo = {
item —This.newItem
};
This.todos.push(todo);
This.newItem=';
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<divid="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>
<lib-for="todo in todos">
<input type="checkbox">
<span>{{todo.item}}</span>
</li><!--- Modify the position of the closed tag -->
</ul>
<pre>{{$data}}</pre>
</div>
Now I understand why the VS Code Live Server feature did not reflect it.
In the file below, the input and span tags were not sandwiched between the li tags in the ul tags.
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divid="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>
<liv-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>
Below is the revised HTML file.The input and span tags are included in the li tag.
Corrected as below, it was reflected in Live Server.
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<divid="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>
<lib-for="todo in todos">
<input type="checkbox" v-model="todo.isDone">
<span>{{todo.item}}</span>
</li>
</ul>
<pre>{{$data}}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
By the way, I didn't need to change the JavaScript file.
Thank you for teaching me.
© 2024 OneMinuteCode. All rights reserved.