在Vue 中调用数据出现属性不存在的问题

最新推荐文章于 2023-11-20 14:59:30 发布

dishuyin5924

最新推荐文章于 2023-11-20 14:59:30 发布

阅读量2.4k

点赞数 1

文章标签： javascript 数据库 json ViewUI

原文链接：http://www.cnblogs.com/pingzx/p/10884212.html

版权

在Vue中，请求数据时可能出现属性不存在的报错，因为数据通常是异步加载的。例如，从JSON获取学生分数时，如果没有预先声明数据类型，可能会导致`undefined`错误。解决方法是确保在尝试访问属性之前，数据已经加载完成，或者使用条件渲染避免在数据未加载时尝试渲染不存在的属性。

摘要由CSDN通过智能技术生成

这已经是我在调用数据时趟过几次的坑了，索性记录下来防止后面再犯；

一般我们请求数据来渲染一个页面的时候，请求下来的数据基本上都是数组或是对象，再通过列表循环和插值表达式渲染的页面；在data 中提前声明接收数据的变量时若为指定类型，就直接将数据渲染到页面，在浏览器的控制台基本上都会出现 “某某属性未定义” 的英文报错；下面举个例子：

先假设请求的是下面的json 数据：

{
  "code": 0,
  "data":[
    {
      "name": "Buccky",
      "age": 16,
      "score": 77
    },
    // 。。。。。
  ]
}

数据请求下来将data的学生分数选项存到 scoreInfo中，如下：

new Vue({
  data(){
    return {
      scoreInfo: []
    }
  }
})

这里为了说明问题，不用列表渲染，我们只取第一条数据中的name进行渲染，如果像这样下面这样写的话，就会出现上面说的那种报错：

...
<span>{
    { scoreInfo[0].name }}</span>

这样写后

关注