“TypeError: Cannot read properties of undefined (reading ‘0‘)“。Vue下v-if条件渲染报错解决

代码如下

<el-descriptions-item  label="支撑层" label-class-name="my-label" content-class-name="my-content">
  <span v-if="!TagInfo.brace[0]">--</span>
  <el-tag v-else size="small" v-for="item in TagInfo.brace" :key="item.index">{{item}}</el-tag>
</el-descriptions-item>

控制台报错如下，界面可正常显示

原因： 接口数据为异步获取，界面渲染时会先判断数据情况，此时TagInfo.brace[0]并未定义故报错，当异步获取数据获取到时，通过v-if再次判断正常渲染，所以界面无错误。
解决办法： 网上很多方案都很蠢，也不太能执行成功，比如利用计算属性，利用延迟函数等等
其实可以利用逻辑运算符巧妙地解决该问题，如下：

<el-descriptions-item  label="支撑层" label-class-name="my-label" content-class-name="my-content">
  <span v-if="TagInfo.brace&&!TagInfo.brace[0]">--</span>
  <el-tag v-else size="small" v-for="item in TagInfo.brace" :key="item.index">{{item}}</el-tag>
</el-descriptions-item>

解决原因：&&从左到右执行，当TagInfo.brace不存在的时候，不继续运行，故不会报“0”的错误。由于我的西项目接口格式TagInfo.brace一定存在，我这样写就可以。如果要通用，需要如下写

<el-descriptions-item  label="支撑层" label-class-name="my-label" content-class-name="my-content">
  <span v-if="TagInfo&&TagInfo.brace&&!TagInfo.brace[0]">--</span>
  <el-tag v-else size="small" v-for="item in TagInfo.brace" :key="item.index">{{item}}</el-tag>
</el-descriptions-item>