CODEWITHSUNDEEP
javascriptvue.jstransition
user2923339
user2923339

Reputation: 159

Can :key be used without v-for in VUE?

I use VUE to animate the slider (a list of images). There are two/three slides, each consisting of maximum 9 images. I have a computed property slide which returns the current set of images. There is another property start which stands for the number of the first image of a current slide. The <ul> element is the direct descendant of <transition>, so the animation takes place only when <ul>'s key changes. The first snippet is how I'd like to solve the problem. It is working but I can't find any information if it's ok to use a :key property on an element without v-for loop.

How was the problem solved untill now? There were two v-for loops. Slide computed property returned [slide] and artificially looped through one-element table. The problem I see is that v-for loops take the whole objects as :key and it's not what documentation recommends. The second snippet is how the code looks right now.

        <transition>
            <ul :key="this.start">
                <li v-for="image in slide" :key="image.id">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>
        <!--CURRENTLY-->
        <transition>
            <ul v-for="slide in slides" :key="slide">
                <li v-for="image in slide" :key="image">
                    <a>
                        <img />
                    </a>
                </li>
            </ul>
        </transition>

Upvotes: 0

Views: 868

Answers (1)

Cl&#233;ment Baconnier
Cl&#233;ment Baconnier

Reputation: 6058

Since you asked me to post my comment as answer, I will simply quote the documentation: https://v2.vuejs.org/v2/api/#key

It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:

  • Properly trigger lifecycle hooks of a component
  • Trigger transitions

For example:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

When text changes, the <span> will always be replaced instead of patched, so a transition will be triggered.

Upvotes: 1

Related Questions