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

Posted 2021-12-01 pingzx

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

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

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

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

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

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

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

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

这样写后，浏览器的控制台就会报错，告诉name 这个属性未定义，究其原因是，我们一般请求数据，虽然在这个组件实例创建的时间就已经请求了，但是，请求数据，一般都是使用异步的，在页面渲染时最开始时，scoreInfo: [] 仅仅是个空数组，故会报name 这个属性确实不存在错误提示；

解决办法：

new Vue({
  data(){
    return {
      scoreInfo: [{}]   // 在空数组中加一个空对象
    }
  }
})

当然我们平时请求的数据，不会这么简单，这里在将要请求的数简单修改一下：

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

此时需要将老师的名字渲染出来：

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

要想不报错，还需要像如下修改一下 scoreInfo:

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

当然，还可以将数据改的更为复杂，但只需按照这个思路，就可以轻松的解决了