Question

感谢帮助，仅当我登录时才显示编辑按钮。

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

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

有关我的申请的一些信息： 我正在使用Vuex存储所有数据。理想我只想将Hole项目传递给对话框，但我也可以仅传递ID，然后从Vuex加载该项目。 EditProject是一个新的对话框窗口，我希望可以在其中编辑项目。

我正在创建项目列表。项目与Vuex和Firebase一起存储，并作为计算的道具加载。

computed: {
  projects () {
    return this.$store.getters.loadedProjects
  }
}

然后，我循环浏览所有项目并显示标题，日期，描述和creatorId。

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

这是棘手的部分。我想显示project.creatorId是否与登录用户相同。“ isSignedIn”是计算的道具：

isSignedIn () {
  if (this.$store.getters.user !== null &&  this.$store.getters.user !== undefined) {
    return true
  } else return false
},

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

我尝试了v-if =“ checkUserIdMethod（${project.id}）”和各种变体，但不得不求助于此网站。我非常确定我可以和他们一起使用反引号``

Answer 1

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

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

如果您在许多组件中使用它，则还可以在商店中创建过滤器，并像这样调用它：

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

Answer 2

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

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

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

v-if="isCurrentUser(project.creatorId)"

isCurrentUser(creatorId) {
  return this.$store.getters.user.id === creatorId;
}

此外，如果您仍然需要isSignedIn，我将对其进行简化以提高可读性：

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

在v-for中使用v-if（带有计算的prop）

2 个答案: