Cannot read properties of undefined (reading ‘0‘)“

原代码：

<div class="shop-header-discounts">
      <div class="discounts-left">
        <div class="activity" :class="supportClasses[info.supports[0].type]">
        <span class="content-tag">
        <span class="mini-tag">{{info.supports[0].name}}</span>
        </span>
          <span class="activity-content ellipsis">{{info.supports[0].content}}</span>
        </div>
      </div>
      <div class="discounts-right">
        {{info.supports.length}} 个优惠
      </div>
    </div>

报错：[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘0’)” found in…
原因：异步显示先显示的初始数据，此时还没有数据
修改：<div class="shop-header-discounts" v-if="info.supports"> <div class="discounts-left"> <div class="activity" :class="supportClasses[info.supports[0].type]"> <span class="content-tag"> <span class="mini-tag">{{info.supports[0].name}}</span> </span> <span class="activity-content ellipsis">{{info.supports[0].content}}</span> </div> </div> <div class="discounts-right"> {{info.supports.length}} 个优惠 </div> </div>