vue.js - 环回抛出错误无法处理的实体
问题描述
我使用 vue js 进行前端开发,我使用 loopback api 进行后端。当我提出请求表单环回 api 时,它工作正常,但是当我尝试从网页插入数据时,我在控制台窗口中出现以下错误。
HTMLPage2.html:101 POST http://localhost:3000/api/Cat/ 422(无法处理的实体)
这是我的代码。
<!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>
</head>
<body>
<div id="catApp">
<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>
<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>
</body>
</html>
解决方案
推荐阅读
- javascript - 无法通过 JavaScript 设置 SVG 文本的颜色
- linux - 由于 CPU 使用率高,如何解决 nginx 服务器中的 504?
- python - 我想确保下面的代码包含序列
- python - 具有粘性的线程池执行器
- typescript - 枚举键上的打字稿条件类型
- php - Cron 在时隙之间每 5 秒运行一次 PHP 脚本
- c# - unity显示最佳时间
- typescript - Webpack 5 中用 Typescript 编写的 Web Worker:SyntaxError: Cannot use import statement outside a module
- google-sheets - 仅将文本添加到第一列
- python - Pytorch迁移学习错误:张量a(16)的大小必须与非单维2的张量b(128)的大小相匹配