Vue.js 在v-for内使用v-if（带计算道具）

感谢您帮助我仅在登录时显示编辑按钮

我需要帮助的问题是：我可以绑定我循环通过的整个{{project.*}}吗？到EditProject组件

<EditProject :project="`${project}`">

然后我循环浏览所有项目，显示标题、日期、描述和创建者ID

<v-list>
 <div v-for="project in projects" :key="project.id">
   <p>{{ project.title }}</>
   <edit-project v-if="isSignedIn === project.creatorId">
 </div>

概要：v-for循环包含一个{project.creatorId}，如果与此相同，我希望检查它。$store.getters.user，然后如果匹配，则显示编辑项目。“编辑项目”是打开对话框的按钮。这是我的应用程序的简化版本

---

我尝试过v-if=checkUserIdMethod${project.id}，以及各种变体，但不得不求助于这个网站。我很确定我可以让它与他们一起工作，backticks`

在呈现列表之前，您是否尝试过过滤列表，如：

computed: {
  userProjects () {
    return this.$store.getters.loadedProjects.filter(p => p.creatorId === this.$store.getters.user.id   )
  }
}

computed: {
  userProjects () {
    return this.$store.getters.userLoadedProjects(userId)
  }
}

如果您在许多组件中使用它，您也可以在商店中制作过滤器，并将其称为：

computed: {
  userProjects () {
    return this.$store.getters.loadedProjects.filter(p => p.creatorId === this.$store.getters.user.id   )
  }
}

computed: {
  userProjects () {
    return this.$store.getters.userLoadedProjects(userId)
  }
}

---

您真的应该比较当前用户id，而不是构建额外的方法来确定当前用户是否匹配基于isSignedIn的id，这意味着您可以编写：

v-if=$store.getters.user.id===project.creatorId

或者将其重构为单独的方法：

v-if=isCurrentUserproject.creatorId

另外，如果您仍然需要isSignedIn，我会简化它以增加可读性：

isSignedIn () {
  return this.$store.getters.user !== null && this.$store.getters.user !== undefined;
},

从isSignedIn返回用户id，而不是返回true/false

isSignedIn () {
  return this.$store.getters.user !== null && this.$store.getters.user !== undefined;
},