Can't get Vue.js transition work without a warning message - vue.js

Question

I am using Vue.js transitions to fade elements in/out based on conditional rendering.
First, I am transitioning a group of components. This is working perfectly!
<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>
Each component <component-one.../> is identical. I am rendering a bunch of <div> elements:
// 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>
The functionally works great. The components fade in/out nicely as to the div elements. However, I am getting a warning from vue:
[Vue warn]: can only be used on a single element. Use for lists.
This makes sense as I am transitioning a group of div elements. However, if I use <transition-group> the mode of out-in is no longer working. As I toggle through my div elements, they snap in/out of position as they are fading in/out. I have tried every combination -- including using v-if or v-show to see if that made a difference.
How can I use the transitions I have (that work) but not generate the warning?

Answer 1

`Adding "keys" on each item.
try this.
new Vue({
el: "#app",
data: {
foo: "bar"
},
methods: {
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="foo = 'bar'">show bar</button>
<button #click="foo = 'bazz'">show bazz</button>
<button #click="foo = 'other'">show other</button>
<transition name="fade" mode="out-in">
<div key="one" v-if="foo === 'bar'">
<h3>bar</h3>
</div>
<div key="two" v-if="foo === 'bazz'">
<h3>bazz</h3>
</div>
<div key="three" v-if="foo === 'other'">
<h3>other</h3>
</div>
</transition>
</div>

Answer 2

I believe that the transition element is supposed to wrap just one element and that the reason v-show isn't working is because v-show doesn't actually add/remove anything from the DOM, it just toggles the visibility attribute. If you use any logic that could theoretically show more than one at the same time, you'll get a warning. So what I think you'd really want is for your transition element to wrap each of the individual component-one elements. v-show should take care of the individual element's visibility. Basically, you need the final markup to look like this:
<transition name="fade" mode="out-in">
<div key="one" v-if="foo === 'bar'">
<h3>My First Div</h3>
...`enter code here`
</div>
</transition>
<transition name="fade" mode="out-in">
<div key="two" v-if="foo === 'bar'">
<h3>My Second Div</h3>
...
</div>
</transition>
Try doing either:
A v-for on the transition component that loops through a list of all the items you'd like to render. Each transition should have its own component-one child as it loops through the list.
<transition v-for="(item, index) in items" name="fade" mode="out-in">
<component-one :key="index" v-show="foo === item" :type="type"/>
</transition>
Wrapping the contents of component-one inside a transition. That would include the transition inside the component-one element. Then you can render component-one elements without any transition elements as a parent.
component-one
<transition name="fade" mode="out-in">
<div>
<!-- Component One contents... -->
</div>
</transition>
main
<div>
<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"/>
</div>

Answer 3

The above answers are in fact correct and should be considered by anyone who comes across this thread. I also wanted to add what I found was the underlying issue.
I was using <transition-group> on my parent element(s) that I was trying to transition between. Each component that I was transitioning to had multiple div's underneath. This is what was bubbling up (for lack of better words) that was looking for a <transition-group>.
TL;DR:
The error was coming from the child component(s) that needed to make use of <transition-group>.
Seems obvious now, but hope can save other folks some time.