Vue出现该错误的原因很可能是因为请求服务器获取数据是异步的,请求回来的时候已经开始渲染页面,若此时定义的数据为空也就是没有该数据的属性,则其中的属性值为undefined。

比如说以下代码:

var  vm = new Vue({
   el: "#app",
   data: {
      reData: {}
   },
   methods: {

   }
})

<div class="detail">
    <div class="head">{{reData.data.content}}</div>
</div>

{{reData.data}}不会报错,它是一个undefined,但{{reData.data.content}}会报错,因为这就相当于undefined.content,因此会报错。

解决方式有两种,一种是在数据初始化的时候将data也进行初始化声明,若reData下有多个属性则全部声明出来,如下:

var  vm = new Vue({
   el: "#app",
   data: {
      reData: {
         data: {},
info: {} } }, methods: { } })

第二种是做一个v-if的判断,如下:

<div class="detail" v-if="reData.data">
    <div class="head">{{reData.data.content}}</div>
</div>

注意:这里只能用v-if而不能用v-show,因为v-show控制的是节点的display属性,节点实际还存在,同样也会报错。

转载于:https://www.cnblogs.com/attacking-cabbage/p/10825938.html

Logo

前往低代码交流专区

更多推荐