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

Question

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

Answer 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>