错误描述
我在vue组件中定义了seller数据,seller通过axios请求一个json文件获得,seller中有一个数据supports是数组类型,如下所示:
//

{
"data":{
     "supports": [
          {
            "type": 0,
            "description": "在线支付满28减5"
          },
          {
            "type": 1,
            "description": "VC无限橙果汁全场8折"
          },
          {
            "type": 2,
            "description": "单人精彩套餐"
          }
    }
}

我想拿到“在线支付满28减5”这条数据来渲染我的元素,我采用seller.supports[0].description的方式,如下所示:

<template>
      <div class="suppor">
        <span>{{seller.supports[0].description}}</span>
      </div>
</template>
<script>
export default {
  name: 'Header',
  data () {
  return: {
    seller: { }
   }
  }
}
</script>

按照上面的方式,我虽然如期渲染了元素,但是在浏览器的控制台报如下错误和警告。
在这里插入图片描述
解决办法
给要渲染的元素加上v-if 指令,判断这个数组中是否有内容,警告即可解除,因为我要渲染的span 包含在div中,所以我在div中加入判断指令

      <div v-if="seller.supports" class="suppor">
        <span>{{seller.supports[0].description}}</span>
      </div>

原理解析
我们在data()方法中定义了seller数据以后,该初始数据会先传递给组件,在axios请求到数据之前,组件会读取seller中的数据并渲染,但是此时seller为空对象,seller.supports 也是undefined,所以如果我在采用[0],会报出typeerror错误,但在这之后,axios请求到了数据,元素进一步被渲染,但是控制台的错误警告依然在。
当我加一个判断,就预防了向一个ubdefined的值用索引取值的行为。

Logo

前往低代码交流专区

更多推荐