:key 可以在 VUE 中不使用 v-for 吗？

Question

我使用 VUE 为滑块（图像列表）制作动画。有 two/three 张幻灯片，每张幻灯片最多包含 9 张图片。我有一个计算属性 slide 其中 returns 当前图像集。还有一个属性 start 代表当前幻灯片的第一张图像的编号。 <ul> 元素是 <transition> 的直接后代，因此动画仅在 <ul> 的键更改时发生。第一个片段是我想如何解决这个问题。它正在工作，但我找不到任何信息，如果可以在没有 v-for 循环的元素上使用 :key 属性。

问题到现在是怎么解决的？有两个 v-for 循环。 Slide computed 属性返回 [slide] 并人为循环一个元素 table。我看到的问题是 v-for 循环将整个对象作为 :key 而这不是文档推荐的。第二个片段是代码现在的样子。

        <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>

Answer 1

既然你让我post我的评论作为答案，我将简单引用文档：https://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.

:key 可以在 VUE 中不使用 v-for 吗？

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

javascript

transition

vue.js