define temporary variables in Vue.js template

[mariusa]

What problem does this feature solve?

Sometimes we need to compute and reference the same value multiple times in a template.
It would help with readability & performance to be able to define variables in templates.

Somebody asked this here too:
https://stackoverflow.com/questions/43999618/how-to-define-a-temporary-variable-in-vue-js-template

What does the proposed API look like?

There's a suggestion in the answers, but this allows setting only 1 variable:

<li v-for="id in users" :key="id" :set="user = getUser(id)">

maybe like this?

<li v-for="id in users" :key="id" :set="user = getUser(id); var2 = true; var3=getUserPrefs(id)">

[sionzee]

In my opinion the proper way is to create computed array where is this value already fetched.
eg.: (renamed your users to userIds)

const users = computed(() => userIds.map(uId => getUser(uId)))

Everything what you call a variable can be converted to "computed" style. So why make it more complex?

[LinusBorg]

Change of template syntax is a pretty significant change and will require an RFC.

There's ongoing discussions here: vuejs/rfcs#73

[dima-hx]

You can set multiple properties in :set directive in such way:

                        <div :set="br = {variable1: someCalculation(), variable2: anotherCalculations()}">
                            <pre>{{br}}</pre>
                        </div>

[mariusa]

Interesting. Where is :set documented? Can't find it at https://vuejs.org/api/built-in-directives.html
Please add it to vuejs/rfcs#73

[dima-hx]

Interesting. Where is :set documented? Can't find it at https://vuejs.org/api/built-in-directives.html Please add it to vuejs/rfcs#73

It's not an 'undocumented' feature. Vue will evaluate the JavaScript of any bound attributes and I just chose to invent an attribute called :set. .

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

[neverblued]

IMHO better be like:

<li v-for="id in users" :key="id" v-set="{ user: getUser(id), var2: true, var3: getUserPrefs(id) }">

[DevilTea]

I've a solution that is using a component to solve this issue.

Only tested in vue >= 3.3.0

https://www.npmjs.com/package/vue-temp-var

Example

<script setup lang="ts">
import TempVar from 'vue-temp-var'

function getRandomNumber() {
  return Math.random()
}
</script>

<template>
  <div v-for="i in 10" :key="`random-${i}`">
    <!-- cause the return value would be random, we should store it somewhere -->
    <!-- bind a prop 'define' to 'TempVar'. Because it is a prop, it would still be reactive -->
    <TempVar :define="{ randomNum: getRandomNumber() }">
      <!-- Destruct from slot: defined, the type would be kept -->
      <template #defined="{ randomNum }">
        <span>"{{ randomNum }}"</span>
        <span v-if="randomNum > 0.5"> is larger than 0.5</span>
        <span v-else> is smaller than 0.5</span>
      </template>
    </TempVar>
  </div>
</template>