VueJS中如何渲染子数组内指定类型的数据集

你的写法无法渲染内容是3个明确的代码错误导致的：

• 条件判断误用赋值运算符：v-if判断里写的是=（赋值）而非===（全等比较），这行代码会直接把当前项的type值强制修改为newsCore，根本没有做条件匹配
• 变量名冲突造成作用域混乱：v-for遍历的源数组名为interactions，你给遍历生成的单个临时元素也命名为interactions，直接遮蔽了外层作用域的同名变量，后续取值逻辑完全失效
• 取值逻辑冗余易错：遍历过程中已经可以直接拿到当前迭代的单个元素，不需要额外通过sessions.interactions[index]的方式绕路索引取值，很容易出现上下文不匹配、索引对应错误的问题

方案1：模板内直接实现（快速修复） #

注意不要把v-for和v-if写在同一个DOM节点上（Vue2中v-for优先级更高会造成不必要的性能浪费，Vue3中v-if优先级更高会直接拿不到遍历变量报错），正确写法如下：

<td>
  <!-- 遍历当前行的interactions数组，临时变量命名为item避免和源数组重名 -->
  <span
    v-for="(item, index) in sessions.interactions"
    :key="item.interactionTimestamp || index"
  >
    <!-- 用===做严格比较，直接读取当前遍历项的属性 -->
    <p v-if="item.type === 'newsCore'">
      {{ item.text }}
    </p>
  </span>
</td>

优化提示：key值优先用数据里自带的唯一标识interactionTimestamp，比用数组索引做key更稳定，能避免列表增删时出现渲染错位问题

方案2：计算属性预处理（推荐，性能更好） #

把数据过滤逻辑放到JS层处理，模板只负责渲染，结构更清晰性能更好：
首先在组件中定义计算属性（如果是表格逐行渲染，也可以写成methods接收当前行参数），提前过滤出符合条件的条目：

computed: {
  // 注意替换为你项目中sessions对应的实际数据源路径
  targetInteractions() {
    return this.sessions.interactions.filter(item => item.type === 'newsCore')
  }
}

模板中直接遍历过滤完成的数组即可，不需要再写判断逻辑：

<td>
  <span
    v-for="(item, index) in targetInteractions"
    :key="item.interactionTimestamp || index"
  >
    <p>{{ item.text }}</p>
  </span>
</td>

额外排查点：你给出的原始样例数据中包含NumberLong(xxx)格式内容，这是MongoDB导出的特殊类型标记，不属于标准JSON语法。如果前端直接拉取未做处理的原始数据，会导致JSON解析失败，整个数据对象无法正常读取，也会出现渲染空白的问题，需要提前在接口返回层做预处理，把这类特殊字段转成普通数字/字符串。

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