Closed
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="filter
5192
s.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>Metadata
Metadata
Assignees
Labels
No labels