解决[Vue warn]：Error in render: "TypeError: Cannot read property '0' of undefined"的问题

错误描述
我在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的值用索引取值的行为。