Vue.js中v-for遍历API数据时如何跳过含undefined的行？

针对你遇到的API数据不完整、部分行需跳过的问题，给你两种直接好用的解决方式：

方法一：模板内直接判断（快速实现） #

在<tr>标签上同时使用v-for和v-if，通过判断过滤掉desc_de不存在的行：

<table>
  <!-- Vue3写法：用可选链操作符?.避免article_data不存在时报错 -->
  <tr v-for="sp in apiData" :key="sp.id" v-if="sp.article_data?.desc_de">
    <td>{{ sp.name }}</td>
    <td>{{ sp.type }}</td>
    <td>{{ sp.article_data.desc_de }}</td>
  </tr>

  <!-- Vue2写法：无可选链，用逻辑与判断 -->
  <tr v-for="sp in apiData" :key="sp.id" v-if="sp.article_data && sp.article_data.desc_de">
    <td>{{ sp.name }}</td>
    <td>{{ sp.type }}</td>
    <td>{{ sp.article_data.desc_de }}</td>
  </tr>
</table>

这个判断逻辑会自动排除两种无效情况：

• sp.article_data完全缺失
• sp.article_data.desc_de为undefined/null

方法二：先过滤数据再渲染（性能更优） #

如果数据量较大，建议在computed属性中提前过滤出有效数据，模板只负责渲染，这样更高效且代码更清晰：

<!-- Vue3 <script setup>写法 -->
<script setup>
import { ref, computed } from 'vue'

// 假设这是从API获取的原始数据
const apiData = ref([])

// 过滤出有有效desc_de的条目
const validData = computed(() => {
  return apiData.value.filter(item => {
    // 同时确保article_data存在，且desc_de不为空/undefined/null
    return item.article_data && item.article_data.desc_de != null
  })
})
</script>

<template>
  <table>
    <tr v-for="sp in validData" :key="sp.id">
      <td>{{ sp.name }}</td>
      <td>{{ sp.type }}</td>
      <td>{{ sp.article_data.desc_de }}</td>
    </tr>
  </table>
</template>

如果需要连空字符串也排除，把判断条件改成item.article_data.desc_de即可（空字符串会被视为false）。

内容的提问来源于stack exchange，提问作者eljulio