javascript - 可以 :key be used without v-for in VUE?

Question

我使用 VUE 为 slider (图像列表)设置动画。有两/三张幻灯片，每张最多包含 9 张图像。我有一个计算属性 slide它返回当前的图像集。还有一个属性start它代表当前幻灯片的第一张图像的编号。 <ul> element 是 <transition> 的直接后代，因此动画仅在 <ul> 时发生的关键变化。第一个片段是我想如何解决问题。它正在工作，但我找不到任何信息是否可以在没有 v-for 循环的元素上使用 :key 属性。

到目前为止问题是如何解决的？有两个 v-for 循环。 Slide 计算属性返回 [slide] 并人为地循环遍历单元素表。我看到的问题是 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

既然您要求我发表评论作为答案，我将简单地引用文档: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.