v-on 处理程序中的错误（Promise/async）：“TypeError：无法读取未定义的属性“数据””//未定义

Posted 2023-02-23

【中文标题】v-on 处理程序中的错误（Promise/async）：“TypeError：无法读取未定义的属性“数据””//未定义

【英文标题】：Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined" // undefined

【发布时间】：2020-08-02 12:43:39

【问题描述】：

我正在尝试将数据从 v-text-field 推送到 json 文件中。当我在 Postman 上尝试它时它起作用了，所以我猜测错误来自客户端

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);
    

产品路由器：

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：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

【问题讨论】：

可能你没有在这里获取数据catch(error) this.error = error.response.data.message 尝试与console.log(error.response) 核对

嗨，摆脱了错误。但是它现在只是在控制台“未定义”中打印 - 每当我单击按钮创建产品并且在 json 文件中没有创建产品时

【参考方案1】：

解决方案：

您的create 函数正在使用未传递的参数。将其更改为：

export default 
    create(one, two, three, four, five, six, seven) // <-- add arguments
        return Api().post('/product', one, two, three, four, five, six, seven);
    

---

改进：

简化一切：

1) 将所有表单模型数据移动到一个数据对象formData：

return 
  // ...
  formData: 
    onetext: null,
    twotext: null,
    ...
  

2) 在模板中，不要硬编码v-text-field 的列表，而是使用v-for 循环该formData 对象：

<v-text-field v-for="(value, key) in formData" :key="key"
              label="Card Type" v-model="formData[key]"
></v-text-field>

3) 在create 方法中传递formData 对象而不是多个参数：

await ProductService.create(this.formData);

4) 更改 ProductService.create、Api().post 和 router.post 以使用/传递该对象：

create(formData) // <-- Accepts an object now
    return Api().post('/product', formData); // <-- Passes the object

这是demo

【讨论】：

嘿，谢谢您的回答。这似乎解决了我的问题。但是现在的问题是，当我检查我的 product.json 文件时。它的内容是 "" 。这有什么具体原因吗？理论上，我期望的是一旦调用 POST 请求。它应该使用来自文本字段的数据在 json 文件中创建一个新产品

ps。我会将我的 product.json 文件添加到问题中

在router.post 中，您是否在控制台中成功测试了file 和req.params？我猜你还没有通过所有 7 个参数。您的路由路径必须如下所示：:one/:two/:three/:four/:five/:six/:seven。我想你想要req.body。

嘿，丹，你可以多玩一些，你的权利。 req.body 是我想要使用的。所以它以我想要的方式写入 json 文件。现在唯一的问题是它只写入第一个参数。所以 onetext 而不是所有这些。为什么会出现这种情况？

切换到您的改进并更新了Api.post() 和formData。我唯一的问题是我需要对路由器进行哪些更改？