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

Question

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

Answer 1

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

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

但我建议 return 计算属性像 :

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

然后直接在模板中使用它:

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

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

White screen when i try to use filter vue js 3

javascript

arrays

javascript-objects

vue.js

vuejs3