Question

我使用VUE动画化滑块（图像列表）。有两张/三张幻灯片，每张最多包含9张图像。我有一个计算属性slide，该属性返回当前图像集。还有另一个属性start，它代表当前幻灯片的第一张图像的编号。 <ul>元素是<transition>的直接后代，因此动画仅在<ul>的键更改时才会发生。第一个片段是我要解决的问题。它正在工作，但是我可以在没有v-for循环的元素上使用：key属性确定是否可以找到任何信息。

问题到现在如何解决？有两个v-for循环。幻灯片计算的属性返回[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://vuejs.org/v2/api/#key

它也可以用于强制更换元件/组件   而不是重复使用它。当您要执行以下操作时会很有用：


正确触发组件的生命周期挂钩

触发过渡


例如：
<transition>
  <span :key="text">{{ text }}</span>
</transition>
当text更改时，<span>将始终被替换而不是修补程序，因此将触发过渡。

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

1 个答案: