Vue TypeError: Cannot read properties of undefined (reading ‘xxxx‘) ,错误原因及解决方案

今天使用Vue+axios 查询数据库信息,并显示。
用到了v-for便签。
axios 也可以正常接收到数据。
但是总是报同一个错误,无法读取未定义的标签。
但是代码中明显有。

TypeError: Cannot read properties of undefined (reading 'xxxx')

在这里插入图片描述

在这里插入图片描述

错误截图:
在这里插入图片描述

原因:
上面的代码为:

  <td>{{b.book.publisher.name}}</td>
  <td>{{b.book.publisher.loc}}</td>

因为数据库字段为publisher的有的值为NULL, 所以才会报错。

如果出现此类错误可以查找一下是否有对象的值为NULL。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
这个错误通常在使用Vue.js中遇到,当你尝试访问一个未定义或为`null`的数据属性时会出现。`TypeError: Cannot read properties of undefined (reading 'query')`表明你在某个组件或者方法中尝试访问`query`属性,但这个属性在当前上下文中并未被初始化或者赋值。 可能是以下几个原因导致的: 1. **数据绑定错误**:如果你在模板中使用`v-bind:query`,可能传递给它的值是undefined。检查`this.query`是否已正确设置。 ```html <template> <div v-bind:query="getDataFromAPI"></div> </template> <script> export default { data() { return { query: null, // 初始化为 null }; }, methods: { getDataFromAPI() { /* ... */ } }, mounted() { this.getDataFromAPI(); // 如果没有立即获取数据,可能会先报错 } } </script> ``` 2. **异步操作**:在组件生命周期钩子(如`mounted`)中,如果查询数据依赖于异步操作(如`axios`或`fetch`),确保这些操作在访问数据之前完成。 3. **组件状态管理**:在Vuex等状态管理库中,确保你正确地从store中获取`query`。 4. **路由参数**:在路由跳转时,可能需要检查当前路由的动态参数是否正确设置。 修复这个问题的方法通常是检查代码中的错误源头,初始化可能为undefined的变量,并处理可能出现的情况,例如添加`?.`运算符来防止直接访问: ```javascript <template> <div>{{ query?.someProperty }}</div> </template> ... getDataFromAPI() { this.query = await yourDataPromise; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vivien_o.O

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值