v-on 处理程序中的错误(Promise/async):“TypeError:无法读取未定义的属性‘数据’"//不明确的 [英] Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined" // undefined
问题描述
我正在尝试将数据从 v-text-field 推送到 json 文件.当我在 Postman 上尝试它时它起作用了，所以我猜测错误来自客户端
product.vue
<v-row><v-col><v-文本字段标签=440"v-model="onetext"></v-text-field><v-文本字段标签=卡片类型"v-model="双文本"></v-text-field><v-文本字段标签=卡片类型"v-model="三文"></v-text-field><v-文本字段标签=卡片类型"v-model="fourtext"></v-text-field><v-文本字段标签=卡片类型"v-model="五文"></v-text-field><v-文本字段标签=卡片类型"v-model="sixtext"></v-text-field><v-文本字段标签=卡片类型"v-model="seventext"></v-text-field></v-col></v-row></v-容器></v-card-text><v-card-actions><v-间隔></v-间隔><v-btn color="primary" @click="dialog = false">关闭</v-btn><v-btn color="primary" @click="create">保存</v-btn></v-card-actions> 从 '@/services/ProductService' 导入 ProductService导出默认{成分: {}，数据() {返回 {对话:假，产品:空，一个文本:空，双文本:空，三文:空，四文本:空，五文:空，六文:空，七文:空}},异步挂载(){}，方法: {异步创建(){尝试 {await ProductService.create(this.onetext, this.twotext, this.threetext, this.fourtext, this.fivetext, this.sixtext, this.seventext)} 捕捉(错误){this.error = error.response.data.message}}}}ProductService.js
出口默认{创建(){return Api().post('/product', 一、二、三、四、五、六、七);}}产品路由器:
router.post("/", function(req, res){尝试{const fileName = path.resolve("server",'../product.json');const 文件 = 要求(文件名)；常量产品 = {101:req.params.one，201:req.params.two，420:req.params.3，440:req.params.4，444:req.params.5，第451话452:req.params.seven}fs.writeFile(fileName, JSON.stringify(product, null, 2), function(err){如果(错误){返回 console.log(err);}console.log("文件已保存");res.status(200).json(产品);});}赶上(错误){res.status(500).json({消息:写入文件时出错"，错误:错误});}})<块引用>
ERR:v-on 处理程序中的错误(Promise/async):TypeError:无法读取未定义的属性‘数据’"
- 为什么我会收到这个错误，我可以做些什么来解决这个问题?
预期的 product.json 文件
<代码>{101":1.9，201":2.18，420":4.1，440":9.2，444":11.16，451":122.12，452":11.9}解决方案:
您的 create 函数正在使用未传递的参数.改为:
export default {create(一、二、三、四、五、六、七){//<-- 添加参数return Api().post('/product', 一、二、三、四、五、六、七);}}<小时>
改进:
简化一切:
1) 将所有表单模型数据移动到一个数据对象 formData:
return {//...表单数据:{一个文本:空，双文本:空，...}}2) 在模板中，不是对 v-text-field 的列表进行硬编码，而是使用 v-for 循环遍历该 formData 对象:
3) 在 create 方法中传递 formData 对象而不是多个参数:
await ProductService.create(this.formData);4) 更改 ProductService.create、Api().post 和 router.post 以使用/传递该对象:
create(formData){//<-- 现在接受一个对象return Api().post('/product', formData);//<-- 传递对象}这是一个演示
I am trying to push data from a v-text-field onto a json file. When i tried it on Postman it worked so I'm guessing the error is coming from the client side
product.vue
<v-container>
<v-row>
<v-col>
<v-text-field
label="440"
v-model="onetext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="twotext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="threetext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="fourtext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="fivetext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="sixtext"
></v-text-field>
<v-text-field
label="Card Type"
v-model="seventext"
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click="dialog = false">Close</v-btn>
<v-btn color="primary" @click="create">Save</v-btn>
</v-card-actions>
import ProductService from '@/services/ProductService'
export default {
components: {},
data() {
return {
dialog: false,
product: null,
onetext: null,
twotext: null,
threetext: null,
fourtext: null,
fivetext: null,
sixtext: null,
seventext: null
}
},
async mounted() {},
methods: {
async create() {
try {
await ProductService.create(this.onetext, this.twotext, this.threetext, this.fourtext, this.fivetext, this.sixtext, this.seventext)
} catch (error) {
this.error = error.response.data.message
}
}
}
}
ProductService.js
export default {
create(){
return Api().post('/product', one, two, three, four, five, six, seven);
}
}
ProductRouter:
router.post("/", function(req, res){
try{
const fileName = path.resolve("server",'../product.json');
const file = require(fileName);
const product = {
101: req.params.one,
201: req.params.two,
420: req.params.three,
440: req.params.four,
444: req.params.five,
451: req.params.six,
452: req.params.seven
}
fs.writeFile(fileName, JSON.stringify(product, null, 2), function(err){
if (err){
return console.log(err);
}
console.log("the file was saved");
res.status(200).json(product);
});
} catch(err){
res.status(500).json({
message: "Error writing to file",
error: err
});
}
})
ERR: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined"
- Why am i getting this error and is there anything i could do to fix this?
EDIT: Expected product.json file
{
"101": 1.9,
"201": 2.18,
"420": 4.1,
"440": 9.2,
"444": 11.16,
"451": 122.12,
"452": 11.9
}
Solution:
Your create function is using arguments that were not passed. Change it to:
export default {
create(one, two, three, four, five, six, seven){ // <-- add arguments
return Api().post('/product', one, two, three, four, five, six, seven);
}
}
Improvement:
Simplify everything:
1) Move all form model data into one data object formData:
return {
// ...
formData: {
onetext: null,
twotext: null,
...
}
}
2) In the template, instead of hard-coding the list of v-text-field, use v-for to loop over that formData object:
<v-text-field v-for="(value, key) in formData" :key="key"
label="Card Type" v-model="formData[key]"
></v-text-field>
3) Pass the formData object in the create method instead of multiple arguments:
await ProductService.create(this.formData);
4) Change ProductService.create, Api().post, and router.post to use/pass that object:
create(formData){ // <-- Accepts an object now
return Api().post('/product', formData); // <-- Passes the object
}
Here's a demo
这篇关于v-on 处理程序中的错误(Promise/async):“TypeError:无法读取未定义的属性‘数据’"//不明确的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
