当我尝试使用 filter vue js 3 时出现白屏

如何解决当我尝试使用 filter vue js 3 时出现白屏

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

有人知道这里的问题吗？

解决方法

看起来您正在使用 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>