vue.js - Vue js 应用程序抛出错误(Id not Found)
问题描述
我使用 git bash 创建了环回应用程序。我正在使用 vue js 进行前端开发。当我在 localhost 中运行应用程序并尝试访问 html 页面时。我在谷歌浏览器控制台窗口中遇到以下错误..
server.js:1 加载资源失败:服务器响应状态为 404(未找到) vue.js:634 [Vue 警告]:找不到元素:#catApp
这是代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./server.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const API = 'http://localhost:3000/api/Cat/';
let catApp = new Vue({
el: '#catApp',
data: {
cats: [],
cat: {
id: '',
name: '',
age: '',
gender: '',
breed: ''
}
},
created: function () {
this.getCats();
},
methods: {
getCats: function () {
fetch(API)
.then(res => res.json())
.then(res => this.cats = res);
},
storeCat: function () {
let method;
console.log('storeCat', this.cat);
// Handle new vs old
if (this.cat.id === '') {
delete this.cat.id;
method = 'POST';
} else {
method = 'PUT';
}
fetch(API, {
headers: {
'Content-Type': 'application/json'
},
method: method,
body: JSON.stringify(this.cat)
})
.then(res => res.json())
.then(res => {
this.getCats();
this.reset();
});
},
deleteCat: function (c) {
fetch(API + c.id, {
headers: {
'Content-Type': 'application/json'
},
method: 'DELETE'
})
.then(res => res.json())
.then(res => {
this.getCats();
});
// call reset cuz the cat could be 'active'
this.reset();
},
editCat: function (c) {
/*
This line was bad as it made a reference, and as you typed, it updated
the list. A user may think they don't need to click save.
this.cat = c;
*/
this.cat.id = c.id;
this.cat.name = c.name;
this.cat.age = c.age;
this.cat.breed = c.breed;
this.cat.gender = c.gender;
},
reset: function () {
this.cat.id = '';
this.cat.name = '';
this.cat.age = '';
this.cat.breed = '';
this.cat.gender = '';
}
}
});
</script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="catApp" v-cloak>
<h1>Cats</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Breed</th>
<td> </td>
</tr>
</thead>
<tbody>
<tr v-for="cat in cats">
<td @click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
<td>{{cat.age}}</td>
<td>{{cat.gender}}</td>
<td>{{cat.breed}}</td>
<td @click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
</tr>
</tbody>
</table>
<form @submit.prevent="storeCat">
<p>
<label for="name">Name</label>
<input type="text" id="name" v-model="cat.name">
</p>
<p>
<label for="age">Age</label>
<input type="number" id="age" v-model="cat.age">
</p>
<p>
<label for="breed">Breed</label>
<input type="text" id="breed" v-model="cat.breed">
</p>
<p>
<label for="gender">Gender</label>
<input type="text" id="gender" v-model="cat.gender">
</p>
<input type="reset" value="Clear" @click="reset">
<input type="submit" value="Save Cat ">
</form>
</div>
</body>
</html>
解决方案
将所有脚本标记放在前面
消除
<style>
[v-cloak] {
display: none;
}
</style>
并移除 v-cloak
<div id="catApp" >
推荐阅读
- angular - 如何使用angular4将选定的选项值发布到角度材料表
- asp.net-mvc - 是否可以在 MVC Razor 中结合 Html.LabelFor CSS 类和文本值?
- jquery - 选择标记中的选项未附加在 jquery 中
- c - 了解 valgrind memcheck 工具中的内存泄漏类型
- server-sent-events - 气氛回退不起作用?
- javascript - 如何使用 Id 将页面重定向到另一个页面
- firebase - php-curl 和浏览器调用 php 脚本发送 http 请求有什么区别?
- google-app-engine - GAE 数据存储区读取操作定价
- mysql - Magento 数据库导入问题
- php - 使用按钮将数据从一个表移动到另一个表 Laravel