Vue使用v-if判断数组长度是否为0时length报错undefined

Vue使用v-if判断数组长度是否为0时length报错后端返回数据使用v-if判断数组长度的时候length会报错"TypeError: Cannot read property length of undefined"vue组件代码<div v-if="allData['补考科目'].length > 0"><span v-for="(v,i) in allData['

一只欢脱的知更鸟呀

7726人浏览 · 2020-06-04 16:54:49

一只欢脱的知更鸟呀 · 2020-06-04 16:54:49 发布

Vue使用v-if判断数组长度是否为0时length报错

后端返回数据 后端返回数据格式是这样的
使用v-if判断数组长度的时候length会报错"TypeError: Cannot read property length of undefined"
在这里插入图片描述
vue组件代码

<div v-if="allData['补考科目'].length > 0">
  <span v-for="(v,i) in allData['补考科目']" :key="i">
     《{{v}}》
  </span>
</div>
<div v-else>恭喜你，没有需要补考的科目！</div>

产生原因：未判断数组是否为undefined、、

解决办法：加个判断，注意这里判断undefined要写在判断length前面，否则无效

<div v-if="allData['补考科目'] && allData['补考科目'].length > 0">
   <span v-for="(v,i) in allData['补考科目']" :key="i">
      《{{v}}》
   </span>
</div>
<div v-else>恭喜你，没有需要补考的科目！</div>