在Vue组件渲染期间多次调用该函数

Question

我在一个路由视图中有一个组件，该组件又是另一个路由视图的一部分，因此树是这样的：

<app>

  <appContainer>  // This is a route-view

    <myView> // Also a route-view

      <myComponent>

在myComponent我有这个条件渲染：

<b-button v-if="isAdmin(currentUser)'">

此功能表现出意外的行为

isAdmin(username) {

  let userObject = this.$store.getters.getCurrentUserObject(username)

  return userObject.role === 'ADMIN'

}

将userObject被调高的undefined，直到我说的函数内部调试器，并意识到页面在此它被称为多次渲染其中的一些商店data属性仍然是空导致getters返回null。可能是什么原因？为什么多次调用此方法？

PS：我的组件中有一个for循环，这可能是原因吗？

<div v-for="bike in bikes":key="bike.timestamp">

  <p>{{ bike.name }}</p>

  <b-img fluid v-if="bike.imagePath" v-bind:src="returnImage(bike.imagePath)"></b-img>

  <p>{{ bike.timestamp}}</p>

</div>  

这叫做created钩子

created() { 

   this.getBikes()

 }

Answer 1

乍一看听起来像是返回类型问题。isAdmin已经返回了一个布尔值，与相比，布尔值反过来变得“明确”了currentUser。这种比较的结果总是虚假的。您必须将v-if指令的条件更改为类似以下内容：v-if="isAdmin(currentUser)"关于多次通话，您必须更新您的问题以反映您提到的循环的详细信息。

Answer 2

PS: I have a for loop in the component, could this be the reason?&nbsp;这可能是原因，因为它在循环确定时会渲染很多次。提供循环代码以调试更多信息。