Пустое сообщение о результатах с переходной группой («дети должны быть введены»)

Question

Я создал небольшой инструмент для фильтрации данных, используя vue.js, и сделал так, чтобы он выглядел красиво, используя переходы. Но я также хочу отобразить сообщение, если нет результатов для текущей настройки фильтра, поэтому я попробовал следующее:

<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>

… но это не работает, и я получаю предупреждение:

[Vue warn]: дети должны быть набраны:

Теперь я могу переместить сообщение за пределы <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>

… но тогда я потерял бы причудливую анимацию для этого сообщения.

Есть ли какое-нибудь нехорошее решение для отображения сообщения "пустые результаты" с переходом?
_{(Хакерское решение - создать фиктивную запись в данных RESULTS и затем проверять ее везде.)}

Answer 1

Вы должны обернуть элемент, содержащий Извините, результатов нет. переходом с тем же именем, что и у группы переходов, следующим образом:

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>

Answer 2

<transition-group> предназначено для списков; вам нужно <transition>. Переход отдельных элементов .

Сохраните свойство name из <transition-group>, чтобы анимация была одинаковой.