A Vue component for defining temporary variables in the template with type inference.
Checkout the discussion of vuejs/rfcs#505
Vue 3.3.0+ is required.
npm install vue-temp-var
<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. -->
<!-- destruct from slot: defined, the type would be kept -->
<TempVar
v-slot="{ randomNum }"
:define="{ randomNum: getRandomNumber() }"
>
<span>"{{ randomNum }}"</span>
<span v-if="randomNum > 0.5"> is larger than 0.5</span>
<span v-else> is smaller than 0.5</span>
</TempVar>
</div>
</template>