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

Posted 2023-02-22

【中文标题】当我尝试使用过滤器 vue js 3 时出现白屏

【英文标题】：White screen when i try to use filter vue js 3

【发布时间】：2021-04-15 17:40:22

【问题描述】：

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

【参考方案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 ？

只有在设置挂钩中是的