Can v-for have local variables?

[hezedu]

What problem does this feature solve?

Repeated comparisons: v.id === currentId

<ul>
  <li v-for="v in list"
    :class="v.id === currentId ? 'active' : ''">
    {{v.id === currentId ? 'active' : 'not active'}}
  </li>
</ul>

What does the proposed API look like?

Define a local variable: isActive

<ul>
  <li v-for="v in list, isActive = v.id === currentId"
    :class="isActive ? 'active' : ''">
    {{isActive ? 'active' : 'not active'}}
  </li>
</ul>

[Killea]

it could be this？

<ul>
  <template v-for="v in list">
    <li v-if="v.id === currentId" class="active">
    active
    </li>
    <li v-else>
     not active
    </li>
  </template>
</ul>

[hezedu]

@Killea No, I don't want to repeat. <li> will be more other same attributes, such as key.


And template can't set key

[posva]

Please search v-scope in issues and PR. This was dropped

[zetaraku]

There is a trick to achieve it, but I think an official support will be nice.

<ul>
  <template v-for="v in list">
    <template v-for="isActive in [v.id === currentId]">
      <li :class="{ 'active': isActive }">
        {{ isActive ? 'active' : 'not active' }}
      </li>
    </template>
  </template>
</ul>