如何在Vue与Laravel中利用Pivot实现仅显示收藏项目？

核心思路 #

通过计算属性根据切换状态过滤项目列表，替代直接遍历原始projects数组，自动响应状态变化实时更新渲染内容。

步骤1：添加计算属性过滤项目 #

在组件的computed选项中定义过滤后的项目列表，根据favoriteShown的值决定返回全部项目还是仅收藏项目：

computed: {
  filteredProjects() {
    // 替换`is_favorite`为你实际的收藏状态字段名（比如`favorite`）
    return this.favoriteShown 
      ? this.projects.filter(project => project.is_favorite) 
      : this.projects;
  }
}

步骤2：修改模板渲染代码 #

把原来遍历projects的代码改成遍历计算属性filteredProjects：

<project 
  v-for="(project, index) in filteredProjects" 
  :key="project.id" 
  :index="index" 
  :details="project"
></project>

步骤3：确保响应式变量正确定义 #

如果还没在data里声明状态变量，需要补充：

data() {
  return {
    favoriteShown: false,
    allProjectShown: true,
    projects: [] // 你的项目数据源
  }
}

说明 #

• 计算属性filteredProjects会在favoriteShown或projects变化时自动重新计算，保证列表实时更新。
• 注意替换代码中的is_favorite为你项目数据中实际表示收藏状态的字段名（比如后端返回的favorite字段）。

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