Vue.js v-for调用返回数组方法迭代不生效的解决方案

场景说明 #

父组件向子组件传入作者列表数组，子组件需要过滤保留series（作品列表）非空的作者，再通过v-for渲染列表。

父组件传入的原始数组（已修正语法错误） #

原传入的JSON存在属性缺逗号的语法问题，修正后合法格式如下：

[
  {
    "name": "James T. Kirk",
    "series": [
      {
        "title": "myserie1",
        "kind": "comedy"
      }
    ]
  },
  {
    "name": "Spock",
    "series": [
      {
        "title": "Star Trek",
        "kind": "action"
      },
      {
        "title": "The Next Generation",
        "kind": "comedy"
      }
    ]
  },
  {
    "name": "Jean-Luc Picard",
    "series": []
  },
  {
    "name": "Worf",
    "series": []
  }
]

原代码错误点 #

• 过滤逻辑完全错误：Array.find()只会返回第一个匹配条件的单个对象，拿不到数组；且判断条件写反，x.series.length === 0是筛选空作品的作者，和需求相反。
• 调用方式错误：v-for里直接写方法名allAuthors不会执行方法拿返回值；这种基于props派生列表的场景用计算属性更合适，自带缓存性能更好。
• 渲染逻辑错误：拿作者循环的索引i去取auth.series[i]完全不符合数据结构，每个作者的作品列表是独立的，可能有多个作品，需要内层再套循环；而且原数据没有id字段，key绑定auth.id无效。
• 存在冗余代码：created里把方法赋值给data里的author变量没有任何实际作用，属于无效代码。

正确实现代码 #

<template>
  <!-- 遍历计算属性返回的过滤后作者列表 -->
  <div
    v-for="(auth, authIdx) in validAuthors"
    :key="auth.name"
    class="d-sm-flex mt-8 align-start"
  >
    <div>
      <p>{{ auth.name }}</p>
      <!-- 内层遍历当前作者的所有作品 -->
      <div
        v-for="series in auth.series"
        :key="series.title"
      >
        <p>{{ series.title }}</p>
        <div class="py-4">{{ series.kind }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyListItem",
  props: {
    // 规范props定义，声明类型和默认值
    users: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    validAuthors() {
      // filter返回所有作品列表非空的作者
      return this.users.filter(author => author.series.length > 0)
    }
  }
}
</script>

逻辑说明 #

• 用Array.filter()做过滤，遍历原数组保留所有作品列表长度大于0的作者，返回新数组。
• 过滤逻辑放在计算属性中，父组件传入的users更新时，计算属性会自动重新计算，视图同步更新。
• 两层循环分别遍历作者、作者下的作品，key绑定数据中唯一的字段即可，示例里用name和title做唯一标识，实际项目有id字段优先用id。
• 移除原代码中所有无效的冗余逻辑，props做规范定义避免传入值异常时报错。

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