Vue.js计算属性过滤Ref无结果及组件初始化错误排查求助

问题1：computed过滤列表始终无结果 #

原因 #

computedFilteredList的filter回调函数中未显式返回判断结果。箭头函数使用大括号包裹逻辑时，必须手动return布尔值，否则默认返回undefined，导致所有元素被判定为过滤条件不满足，最终得到空数组。

修复代码 #

修改Tag.vue中的computed逻辑：

const computedFilteredList = computed(() => {
  return posts.value.filter((post) => {
    console.log(post)
    // 显式返回标签匹配结果
    return post.tags.includes(route.params.tag)
  })
})

问题2：Uncaught ReferenceError: Cannot access 'PostList' before initialization #

原因 #

Spinner组件导入路径错误：Spinner属于UI组件，应从components目录导入，而非composables目录。错误的路径导致组件无法正确加载，引发组件注册异常，进而触发初始化顺序错误。

修复代码 #

修改Tag.vue中的Spinner导入语句：

// 原错误路径
// import Spinner from "@/composables/Spinner.vue";
// 修改为正确路径
import Spinner from "@/components/Spinner.vue";

额外优化建议 #

异步加载数据时，建议增加加载状态判断，避免初始空数组导致的UI闪烁：

1. 在getPosts.js中添加加载状态：

const getPosts = () => {
  const posts = ref([])
  const error = ref(null)
  const isLoading = ref(false) // 新增加载状态

  const load = async () => {
    isLoading.value = true
    try{
      let data = await fetch('http://localhost:3000/posts')
      if(!data.ok){
        throw Error('no data available')
      }
      posts.value = await data.json()
    }
    catch(err){
      error.value = err.message
      console.log(error.value)
    } finally {
      isLoading.value = false // 请求结束后关闭加载状态
    }
  }
  return { posts, error, load, isLoading }
}

2. 在Tag.vue的setup中返回isLoading，模板中用加载状态替代列表长度判断：

<div v-if="!isLoading && computedFilteredList.length">
  <PostList :posts="computedFilteredList"/>
</div>
<div v-else><Spinner/></div>

内容的提问来源于stack exchange，提问作者joe