时间戳

首页 > 解决方案 > 在没有警告消息的情况下无法获得 Vue.js 转换工作

vue.js - 在没有警告消息的情况下无法获得 Vue.js 转换工作

问题描述

我正在使用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.../>都是相同的。我正在渲染一堆<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>

功能上效果很好。组件与 div 元素一样淡入/淡出。但是，我收到了来自 vue 的警告：

[Vue 警告]：只能用于单个元素。用于列表。

这是有道理的，因为我正在转换一组 div 元素。但是，如果我使用<transition-group>的模式out-in不再起作用。当我切换 div 元素时，它们会在淡入/淡出时卡入/退出位置。我已经尝试了每一种组合——包括使用v-iforv-show看看这是否有所作为。

如何使用我拥有的转换（有效）但不生成警告？

标签： vue.js

解决方案

`在每个项目上添加“键”。

尝试这个。

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>

推荐阅读