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

Posted pingzx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue 中调用数据出现属性不存在的问题相关的知识,希望对你有一定的参考价值。

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

一般我们请求数据来渲染一个页面的时候,请求下来的数据基本上都是数组或是对象,再通过列表循环和插值表达式渲染的页面;在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:{}}]
    }
  }
})

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

以上是关于在Vue 中调用数据出现属性不存在的问题的主要内容,如果未能解决你的问题,请参考以下文章

vue整个页面不能编辑

在不存在的片段上调用片段生命周期和 onCreate 的问题

检索数据未出现在 ListView 的片段中

vue递归组件的一些理解

vue的计算属性 是怎么关联某个数据

全局属性的“功能”类型上不存在 Vue3 属性“x”