Vue计算属性过滤数组无输出，请求排查问题原因

问题根源 #

你的代码存在两个关键问题导致页面无输出：

1. computed属性未返回结果：filteredDataTest调用了filter方法，但没有将过滤后的数组返回，computed默认返回undefined，v-for遍历undefined自然不会渲染任何内容。
2. filter回调逻辑冗余：filter的回调只需返回布尔值判断是否保留当前项，无需用if包裹返回对象，直接返回user.isTrue即可。

修正后的完整代码 #

模板部分

<div v-for="item in filteredDataTest" :key="item.name">
    {{ item.name }}
</div>

补充：v-for建议添加:key属性，符合Vue性能优化规范，这里用item.name作为唯一标识（假设name不重复）

脚本部分

data() {
  return {
    testArray: [
      {
        name: 'Bob',
        isTrue: false
      },
      {
        name: 'Mary',
        isTrue: true
      },
      {
        name: 'Paul',
        isTrue: false
      }
    ]
  };
},
computed: {
  filteredDataTest() {
    // 修复：返回filter结果，同时简化回调逻辑
    return this.testArray.filter(user => user.isTrue)
  },
},

验证效果 #

修正后页面会正常渲染出Mary，因为只有该项的isTrue为true。

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