Vue.js - Empty results message with transition-group ("children must be keyed")

Question

I have created little data filter tool using vue.js and I made it look fancy using transitions. But I also want to display a message if there are no results for the current filter setting, so I tried the following:

<transition-group …>

  <div class="SOME_CLASSES" v-for="x in RESULTS" :key="x.id">…</div>

  <div class="OTHER_CLASSES" v-if="!RESULTS">Sorry, no results.</div>

</transition-group>

…but this does not work and I am getting a warning:

[Vue warn]: children must be keyed:

Now I could move the message outside the <transition-group> :

<transition-group …>

  <div class="SOME_CLASSES" v-for="x in RESULTS" :key="x.id">…</div>

</transition-group>

<div class="OTHER_CLASSES" v-if="!RESULTS">Sorry, no results.</div>

…but then I would lose the fancy animation for when this message is displayed.

Is there some non-hacky solution to displaying the "empty results" message with a transition?
_{(A hacky solution would be creating a dummy entry in the RESULTS data and then checking for it everywhere.)}

Answer 1

<transition-group> is meant for lists; you need a <transition> . Transitioning single elements .

Keep the name property from the <transition-group> so that the animation is the same.

Answer 2

You should wrap the element that contains Sorry, no results. by a transition with same name as transition group as follows :

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#list-demo', data: { items: [1, 2, 3, 4, 5, 6, 7, 8, 9], nextNum: 10 }, methods: { randomIndex: function() { return Math.floor(Math.random() * this.items.length) }, add: function() { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function() { this.items.splice(this.randomIndex(), 1) }, } })

 .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ { opacity: 0; transform: translateY(30px); }

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="list-demo"> <button class="btn btn-primary" v-on:click="add">Add</button> <button class="btn btn-primary" v-on:click="remove">Remove</button> <transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item"> {{ item }} </span> </transition-group> <transition name="list"> <div class="OTHER_CLASSES" v-if="items.length==0">Sorry, no results.</div> </transition> </div>