在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? 这可能是原因，因为它在循环确定时会渲染很多次。

提供循环代码以调试更多信息。