Template-local variables support #12144
Description
What problem does this feature solve?
Sometimes when I'm using v-for, I feel the need to have a local variable to store the intermediate result from a function call to avoid duplication and unnecessary calls. Others may find the need to give an alias to a property deep in an object.
Begin with the code:
<tbody> <tr v-for="hour in HOURS" :key="hour.key"> <td v-for="day in DAYS" :key="day.key"> <input :id="`classTime_${makeTime(day, hour)}`" v-model="filters.classTimes" :value="makeTime(day, hour)" type="checkbox" > <label :for="`classTime_${makeTime(day, hour)}`"> {{ makeTime(day, hour) }} </label> </td> </tr> </tbody>The makeTime() function was written and called with the same arguments 4x times in each iteration.
In order to simplify this code, I use a workaround that uses v-for with a single-value array:
<tbody> <tr v-for="hour in HOURS" :key="hour.key"> <td v-for="day in DAYS" :key="day.key"> <template v-for="time in [makeTime(day, hour)]" :key="time"> <input :id="`classTime_${time}`" v-model="filters.classTimes" :value="time" type="checkbox" > <label :for="`classTime_${time}`"> {{ time }} </label> </template> </td> </tr> </tbody>It would be nice to have a dedicated directive to add the local variables.
What does the proposed API look like?
I'd like to add a dedicated directive for using local variables like this:
<template v-local="{ time: makeTime(day, hour), myLocal: my.property.within.a.deep.deep.object }"> <!-- templates inside will have access to the `time` and `myLocal` variables --> </template>