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警告]：必须为孩子设置密钥：

现在我可以将邮件移到<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>

...但是当显示此消息时，我将失去精美的动画。

是否有一些非hacky解决方案来显示带有过渡的“空结果”消息？
_{（一种骇人听闻的解决方案是在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>。 Transitioning single elements。

保持name的{{1}}属性，以使动画相同。

带有过渡组的空结果消息（“必须为孩子设置密钥”）

2 个答案: