Vue2 Übergangsmodus

Question

Das funktioniert nicht finden den Code meiner .vue. swapping zwischen div funktionierte gut und die transitionfade funktioniert auch gut. aber modeout-in funktioniert überhaupt nicht. Beide Elemente wurden während des Übergangs gleichzeitig angezeigt.

EDIT ##

Sorry, dass ich mit der Geige nicht vertraut bin. Bitte finden Sie den vollständigen Code meiner .vue unten für Ihre beste Referenz.

<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

Sie müssen key Attribut zu jedem der div geben reibungslos die transition Arbeit zu machen. In Ihrem Fall sehe ich ein extra ', was ein Problem sein könnte, versuchen Sie das zu entfernen.

ändern

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

zu

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

und in ähnlicher Weise auch an anderen Orten.