vue.js - vue.js 如何解决警告“只能用于单个元素。"

Question

我正在为我创建的组件使用过渡，该组件在渲染视图上重复多次：

<slide-y-down-transition>
    <div
      v-for="comment in comment.comments"
      :key="comment.id"
      v-show="displayComments"
    >
      <CommentCard
      />
    </div>
</slide-y-down-transition>

但是当我测试视图时，它会提供一个控制台警告：

[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.

所以我研究了一下，发现文档建议使用“组”。这是一个名为“vue2-transitions”的第三方包，带有一个 group prop，所以我尝试了：

<slide-y-down-transition group>
    <div
      v-for="comment in comment.comments"
      :key="comment.id"
      v-show="displayComments"
    >
      <CommentCard
      />
    </div>
</slide-y-down-transition>

这消除了警告，但导致了意外行为；而不是随着部分的扩展或收缩而将视图的其余内容向下推，它似乎在不首先向下推视图的其余内容的情况下进行“v-show”。结果，视图的底部内容被新显示的 CommentCard 覆盖。它看起来很残酷：

如果可以的话，我不想更改 3rd 方包（“vue2-transitions”）。我敢肯定，如果包的原始创建者可以发表评论，它会澄清事情。

所以我现在只是在研究如何在没有“组”的情况下继续使用正常转换？它工作正常，但我担心 Vue 警告。

我的问题：是什么导致了这个 Vue 警告，有没有办法在不使用“组”转换的情况下解决它？

其他（可能）重要信息： CommentCard 是递归的。

换句话说，评论列表可以包含如图所示的多个评论卡，每个评论卡都可以包含它自己的评论卡列表。这个想法是让过渡显示（或不显示）那些子评论列表。

标签： vue.js

Answer 1

<transition>是为了：

• 单个节点
• 多个节点，一次只渲染 1 个

对于同时渲染的元素，您需要使用<transition-group>并为每个元素提供键。

你可以在这里阅读更多。