当我尝试使用过滤器 vue js 3 时出现白屏

【问题标题】：White screen when i try to use filter vue js 3当我尝试使用过滤器 vue js 3 时出现白屏
【发布时间】：2021-04-15 17:40:22
【问题描述】：

我有一个待办事项列表，我正在尝试像这样显示尚未完成的待办事项 <p id="todosLeft"> {{ todos.value.filter(item => item.done).length }} items left</p> 它不显示错误，但它显示像这样的白页有人知道这里的问题吗？

【问题讨论】：

标签： javascript arrays vue.js javascript-objects vuejs3

【解决方案1】：

看起来您正在使用 ref 属性，无需在模板部分中使用 value 即可访问该属性：

<p id="todosLeft"> {{ todos.filter(item => item.done).length }} items left</p>

但我建议返回一个计算属性，例如：

import {computed, ref} from 'vue'
...
setup(){
    ...
   return{
    todos, todosLength:computed(()=>todos.value.filter(item => item.done).length)
   }
}

然后直接在模板中使用：

<p id="todosLeft"> {{ todosLength }} items left</p>

【讨论】：

它成功了，谢谢。所以我们只在 setUp() 中使用.value ？
只有在设置挂钩中是的