Function called multiple times during Vue component render

Question

I have a component inside a route-view which is in turn part of another route-view so the tree is like this:

<app>
  <appContainer>  // This is a route-view
    <myView> // Also a route-view
      <myComponent>

In myComponent I have this conditional rendering:

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

This function is exhibiting unexpected behaviors

isAdmin(username) {
  let userObject = this.$store.getters.getCurrentUserObject(username)
  return userObject.role === 'ADMIN'
}

The userObject was turning up as undefined until I added a debugger inside the function and realized that this it's being called multiple times during page rendering some of which the store data property is still empty resulting in getters returning null. What could be the reason? Why is this method called multiple times?
PS: I have a for loop in the component, could this be the reason?

<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>

This is called in the created hook

created() { 
   this.getBikes()
 }

If there's anything async involved this is expected behavior--things render when things change, and barring a synchronous process, you need to be able to handle data not being set or percolating through the system yet. — Dave Newton
– Dave Newton, Commented Apr 25, 2019 at 18:43
There are no explicit async operations on the frontend (only backend) though make calls using Axios not sure if that counts. — Samuel
– Samuel, Commented Apr 25, 2019 at 18:47

sepehr · Accepted Answer · 2019-04-25 17:56:16Z

1

Sounds like a return type issue at first sight.

isAdmin is already returning a boolean which in turn is getting “explicitly” compared to currentUser. The result of such comparison is always falsy.

You gotta change the v-if directive’s condition to something like:

v-if="isAdmin(currentUser)"

Regarding the multiple calls, you gotta update your question to reflect the details of the loop you’ve mentioned.

answered Apr 25, 2019 at 17:56

sepehr

18.7k7 gold badges87 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Samuel Over a year ago

You're right about the return and I've modified accordingly but the underlying problem persists.

sepehr Over a year ago

@Samuel Your update to the question is not helpful at all. Please consider putting the whole component code there; only remove the unnecessary irrelevant parts.

José Silva · Accepted Answer · 2019-04-25 18:18:45Z

0

PS: I have a for loop in the component, could this be the reason? Probably it's the reason because it renders many times as the loop determine.

Provide your code of the loop to have more information to debug.

answered Apr 25, 2019 at 18:18

José Silva

4113 silver badges13 bronze badges

3 Comments

Samuel Over a year ago

I'm not sure how that would be helpful, it's a normal v-for loop.

Dave Newton Over a year ago

@Samuel We have no way of knowing how the for loop interacts with the code you've shown. If the component loops over the call then obviously it'll be called multiple times.

José Silva Over a year ago

Definitely, the loop doesn't affect the function isAdmin. As a workaround you can try v-if="currentUser && isAdmin(currentUser)" to call the function only when currentUser is available.

Collectives™ on Stack Overflow

Function called multiple times during Vue component render

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related