Template-local variables support

[zetaraku]

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>

[zetaraku]

Here is a similar question asked on StackOverflow:

https://stackoverflow.com/questions/54446108/how-to-define-variable-in-vue-template

[posva]

As tou replied in other issues this idea has already been dropped before. You can find the pr and issues with v-scope and v-local

[lk77]

in this scenario, the best thing to do is to create a child component,
that will handle the time state

<td v-for="day in DAYS" :key="day.key">
    <my-component :time="makeTime(day, hour)"/>
</td>

my-component :

<template>
  <input
    :id="`classTime_${time}`"
    v-model="filters.classTimes"
    :value="time"
    type="checkbox"
  >
  <label :for="`classTime_${time}`">
    {{ time }}
  </label>
</template>

[zetaraku]

My apologies.

I do read that issue and I follow your comment to search for v-scope,
but 250+ issues popped up and I couldn't easily find something related so I chose to post this issue instead.

By searching with v-scope and v-local combined, the result narrows down to 25+ and I can finally find some related.
I want to link them here for others to view them easily:

#2575 [feature request] local variables in v-for
#6913 hope to have a way to set scope of variable
#7325 WIP: fix #6913, feat($compiler): add support of v-local directive to provide a way to…
#12088 Can v-for have local variables?