Can'；在没有警告消息的情况下，无法获得Vue.js转换工作

我正在使用基于条件渲染的淡入/淡出元素

首先，我正在转换一组组件。这是完美的工作

<div>
    <transition-group name="component-fade" mode="out-in">
        <component-one key="1" v-show="foo === 'one'" :type="type"/>
        <component-one key="2" v-show="foo === 'two'" :type="type"/>
        <component-one key="3" v-show="foo === 'three'" :type="type"/>
    </transition-group>
</div>

每个组件都是相同的。我正在渲染一组

元素：

// component-one.vue
<template>
    <div>
        <div id="div-one">
            <transition name="fade" mode="out-in">
                <div key="one" v-if="foo === 'bar'">
                    <h3>My First Div</h3>
                    ...
                </div>

                <div key="two" v-if="foo === 'bazz'">
                    <h3>My Second Div</h3>
                    ...
                </div>

                <div key="three" v-if="foo === 'other'">
                    <h3>My Third Div</h3>
                    ...
                </div>
                ...
            </transition>
        </div>
    </div>
</template>

//component-one.vue
我的第一个Div
...
我的第二个Div
...
我的第三部
...
...

这个系统在功能上工作得很好。与div元素相比，组件可以很好地淡入/淡出。但是，我从vue收到一个警告：

[Vue warn]：只能在单个元素上使用。用于列表

这是有意义的，因为我正在转换一组div元素。但是，如果我使用

，

输入输出模式不再工作。当我切换我的div元素时，它们在淡入淡出时会捕捉到/淡出位置。我尝试过每种组合——包括使用
v-if
或
v-show
，看看这是否有区别

如何使用我拥有的（有效的）转换，但不生成警告
 `在每个项目上添加“键”

试试这个


newvue({
el:“应用程序”，
数据：{
傅：“酒吧”
},
方法：{
}
})
。淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度0.5s；
}
.淡入，
.淡出{
不透明度：0；
}

显示栏
秀巴兹
展示其他
酒吧
巴兹
其他
`在每个项目上添加“键”

试试这个


newvue({
el:“应用程序”，
数据：{
傅：“酒吧”
},
方法：{
}
})
。淡入激活状态，
.淡入淡出激活状态{
过渡：不透明度0.5s；
}
.淡入，
.淡出{
不透明度：0；
}

显示栏
秀巴兹
展示其他
酒吧
巴兹
其他
我认为transition元素应该只包装一个元素，而v-show

不起作用的原因是因为

v-show

实际上没有从DOM中添加/删除任何内容，它只是切换可见性属性。如果您使用的任何逻辑理论上可以同时显示多个，您将收到警告。因此，我认为您真正想要的是过渡元素包装每个

组件一
元素<代码>v-show
应注意单个元素的可见性。基本上，您需要最终标记如下所示：


我的第一个Div
…`在这里输入代码`
我的第二个Div
...

尝试执行以下任一操作：

transition
组件上的
v-for
，该组件循环浏览要渲染的所有项目的列表。在列表中循环时，每个转换都应该有自己的
组件一
子级


将
组件一的内容包装在
转换中
。这将包括
组件1
元素内部的转换。然后可以渲染
组件一
元素，而不将任何转换元素作为父元素

第一部分



主要

我认为transition元素应该只包装一个元素，而v-show

不起作用的原因是因为

v-show

实际上没有从DOM中添加/删除任何内容，它只是切换可见性属性。如果您使用的任何逻辑理论上可以同时显示多个，您将收到警告。因此，我认为您真正想要的是过渡元素包装每个

组件一
元素<代码>v-show
应注意单个元素的可见性。基本上，您需要最终标记如下所示：


我的第一个Div
…`在这里输入代码`
我的第二个Div
...

尝试执行以下任一操作：

transition
组件上的
v-for
，该组件循环浏览要渲染的所有项目的列表。在列表中循环时，每个转换都应该有自己的
组件一
子级


将
组件一的内容包装在
转换中
。这将包括
组件1
元素内部的转换。然后可以渲染
组件一
元素，而不将任何转换元素作为父元素

第一部分



主要

上述答案事实上是正确的，任何遇到此问题的人都应予以考虑。我还想补充我发现的根本问题

我在试图转换的父元素上使用了
。我转换到的每个组件下面都有多个div。这就是正在寻找
的东西（因为缺少更好的词语）

TL；医生：
错误来自需要使用
的子组件

现在看起来很明显，但希望可以为其他人节省一些时间。
上述答案事实上是正确的，任何人遇到这个问题都应该考虑。我还想补充我发现的根本问题

我在试图转换的父元素上使用了
。我转换到的每个组件下面都有多个div。这就是（为）冒出的泡沫