How to define a temporary variable in Vue.js template

Question

I found a very simple (almost magical) way to achieve that,
All it does is define an inline (local) variable with the value you want to use multiple times:

<li v-for="id in users" :key="id" :set="user = getUser(id)">
  <img :src="https://stackoverflow.com/questions/43999618/user.avatar" />
  {{ user.name }}
  {{ user.homepage }}
</li>

Note : set is not a special prop in Vuejs, it’s just used as a placeholder for our variable definition.

Source: https://dev.to/pbastowski/comment/7fc9

CodePen: https://codepen.io/mmghv/pen/dBqGjM

Update : Based on comments from @vir us

This doesn’t work with events, for example @click="showUser(user)" will not pass the correct user, rather it will always be the last evaluated user, that’s because the user temp variable will get re-used and replaced on every circle of the loop.

So this solution is only perfect for template rendering because if component needs re-render, it will re-evaluate the variable again.

But if you really need to use it with events (although not advisable), you need to define an outer array to hold multiple variables at the same time :

<ul :set="tmpUsers = []">
  <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])">
    <img :src="https://stackoverflow.com/questions/43999618/tmpUsers[i].avatar" />
    {{ tmpUsers[i].name }}
    {{ tmpUsers[i].homepage }}
  </li>
</ul>

credits : @vir us

Although it doesn’t make sense here to basically duplicate the users array, this could be handy in other situations where you need to call expensive functions to get the data, but I would argue you’re better off using computed property to build the array then.

Leave a Comment Cancel reply