Vue2转换模式不起作用

Question

以下是我的.vue的代码。换div之间工作得很好，transitionfade工作得很好。但modeout-in根本不工作。两个元素在转换时同时显示。

编辑＃

对不起，我不熟悉小提琴。请在下面找到我的.vue的完整代码，以供参考。

<template> 
    <div> 
    <div class="col-md-3"> 
     <namecard :shop="shop" :owner="user"></namecard> 
    </div> 

    <div class="col-md-9"> 
     <div> 
     <ul class="nav nav-tabs shop-manage-tabs"> 
      <li class="nav-item"> 
      <a class="nav-link" :class="isActive == 'items' ? 'active' :''" @click.prevent="activateTab('items')">Items</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" :class="isActive == 'operaters' ? 'active' : ''" @click.prevent="activateTab('operaters')">Operaters</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" :class="isActive == 'info' ? 'active' : ''" @click.prevent="activateTab('info')">Info</a> 
      </li> 
      <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" :class="isActive == 'statistics' ? 'active' : ''">Statistics</a> 
      <div class="dropdown-menu"> 
       <a class="dropdown-item" @click.prevent="activateTab('statistics')">Action</a> 
       <a class="dropdown-item" @click.prevent="activateTab('statistics')">Another action</a> 
       <a class="dropdown-item" @click.prevent="activateTab('statistics')">Something else here</a> 
       <div class="dropdown-divider"></div> 
       <a class="dropdown-item" @click.prevent="activateTab('statistics')">Separated link</a> 
      </div> 
      </li> 
     </ul> 
     </div> 

     <transition-group name="fade" mode="out-in"> 

     <div v-if="isActive == 'items'" key="items"> 
      <div class="card" style="padding: 1rem"> 
      <h1>Control Panel</h1> 
      <button type="button" class="btn btn-success" @click="addNewProduct = true">Add New Product</button> 
      <button type="button" class="btn btn-danger" @click="addNewProduct = true">Delete Product</button> 
      </div> 
      <add-new-product v-show="addNewProduct"></add-new-product> 
      <div class="card" style="padding: 1rem"> 
      <item-card :productId="product.id" v-for="product in shop.products" :key="product"></item-card> 
      </div> 
     </div> 

     <div v-else-if="isActive == 'operaters'" key="operaters"> 
      <div class="card" style="padding: 1rem"> 
      <h1>Control Panel</h1> 
      <button type="button" class="btn btn-success" @click="addNewProductModal = true">Add Operator</button> 
      <button type="button" class="btn btn-danger" @click="addNewProductModal = true">Delete Operator</button> 
      </div> 
      <div class="card">operaters</div> 
     </div> 

     <div v-else-if="isActive == 'info'" class="card" key="info"> 
      <div class="card">info</div> 
     </div> 

     <div v-else-if="isActive == 'statistics'" class="card" key="statistics"> 
      <div class="card">statistics</div> 
     </div> 

     </transition-group> 

    </div> 


    </div> 

</template> 

<script> 
    import itemCard from './Item-card.vue' 
    import nameCard from '../Namecard.vue' 
    import addNewProduct from './Add-new-product.vue' 
    export default { 
    components:{ 
     'item-card':itemCard, 
     'namecard':nameCard, 
     'add-new-product':addNewProduct, 
    }, 
    data(){ 
     return{ 
     user:{}, 
     shop:{}, 
     isActive:'items', 
     addNewProduct:false, 
     } 
    }, 
    props:[ 
    ], 
    created(){ 
     this.getUserInfo() 
    }, 
    mounted(){ 
    }, 
    methods:{ 
     getUserInfo(){ 
     var vm = this 
     vm.$http.get('/getAuthUser').then((response)=>{ 
      vm.user = response.data 
      vm.$http.get('/getShop/'+vm.user.id).then((response)=>{ 
      vm.shop = response.data.data.shop 
      }) 
     }) 
     }, 
     activateTab(tab){ 
     var vm = this 
     vm.isActive = tab 
     } 
    } 
    } 
</script> 

Answer 1

你需要给key属性到每个股利使transition工作顺利进行。在你的情况下，我看到一个额外的'，这可能是一个问题，尝试删除。

变化

<div v-if="isActive == 'items'" key="'items'"> 

到

<div v-if="isActive == 'items'" key="items"> 

，同样在其他地方也是如此。