<transition-group> component of Vue should be used properly

  • VUE_BAD_TRANSITION_GROUP
  • Error
  • Medium
  • vue

This rule applies when <transition-group> component of Vue is wrongly used.

It can be applied to the following cases:

  1. <transition> is used on multiple elements. In this case, Vue renders only the first child and ignores the rest. You can fix this problem by applying one of the following:
    • Use <transition-group> instead of <transition> if the effect is intended for each child separately.
    • Use a wrapper element for the children if the effect is intended for the children as a whole.
    • Select one child by using conditional directives like v-if.
  2. Elements inside <transition-group> do not have key attribute. In this case, the elements without key will not be rendered.

Noncompliant Code Example

View with compliant examples side by side 
<template>
  <div>
    <!-- Example 1 -->
    <transition> <!-- VUE_BAD_TRANSITION_GROUP alarm because '<transition>' has three elements as children. -->
      <button key="saved">
        Edit
      </button>
      <button key="edited">
        Save
      </button>
      <button key="editing">
        Cancel
      </button>
    </transition>

    <!-- Example 2 -->
    <transition name="list"> <!-- VUE_BAD_TRANSITION_GROUP alarm because the child element has 'v-for'. That means, it will be rendered as multiple elements. -->
      <span v-for="item in items" v-bind:key="item.id" class="list-item">
        {{ item }}
      </span>
    </transition>

    <!-- Example 3 -->
    <transition-group name="list" tag="p">
      <span v-for="item in items" class="list-item"> <!-- VUE_BAD_TRANSITION_GROUP alarm because '<span>' does not have 'key' attribute. -->
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

Compliant Code Example

View with noncompliant examples side by side 
<template>
  <div>
    <!-- Example 1 -->
    <transition>
      <button v-if="docState === 'saved'" key="saved">
        Edit
      </button>
      <button v-if="docState === 'edited'" key="edited">
        Save
      </button>
      <button v-if="docState === 'editing'" key="editing">
        Cancel
      </button>
    </transition>

    <!-- Example 2 -->
    <transition-group name="list">
      <span v-for="item in items" v-bind:key="item.id" class="list-item">
        {{ item }}
      </span>
    </transition-group>

    <!-- Example 3 -->
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item.id" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

Was this documentation helpful?

Last updated on September 27, 2024