Réutilisation du composant Vue, suppression des données

Question

J'ai configuré un système de composants en utilisant vue-router pour un système d'événements simple. J'aimerais pouvoir utiliser le même composant pour éditer des événements existants et créer de nouveaux événements.

Je n'arrive pas à comprendre comment supprimer les données du composant lorsque je souhaite naviguer d'un événement à l'autre.

J'ai essayé les choses suivantes, qui ne fonctionnent pas:

• réglage eventId: null dans v-link
• mise eventId null par v sur: la mise
cliquez sur
• eventId avec : this. $ route.params.eventId

Router Map: le point de routage create et eventDashboard vers le même composant.

router.map({ 
'/': { 
     name: 'calendar', 
     component: Vue.component('calendar'), 
     subRoutes: { 
      '/rightView': { 
       name: 'rightView', 
       component: Vue.component('rightView'), 
      }, 
     }, 
    }, 
'create': { 
     name: 'create', 
     component: Vue.component('create'), 
     subRoutes: { 
      '/rightView': { 
       name: 'rightView', 
       component: Vue.component('rightView'), 
      }, 
     }, 
}, 
'eventdashboard/:eventId': { 
     name: 'event', 
     component: Vue.component('create'), 
     subRoutes: { 
      '/rightView': { 
       name: 'rightView', 
       component: Vue.component('rightView'), 
      }, 
     }, 
}, 
}) 

Voici le bouton utilisé pour créer un nouvel événement:

<a v-link="{name: 'create', params: { eventId: null }, replace: true}" class="btn btn-success"><i class="fa fa-plus"></i> Create New Event</a> 

Et composant:

Vue.component('create', 
{ 
template: '#create', 
data: function(){ 
    return { 
     eventId: this.$route.params.eventId, 
     event: [] 
    } 
}, 
ready: function() { 

    this.getEvent(); 
}, 

methods: { 
    getEvent: function(eventId){ 
     var getList = this.$http.get('event/'+this.eventId) 
      .success(function(data){ 
       this.event = data; 
      }.bind(this)); 
    }, 
    } 
}); 

Answer 1

S'il vous plaît se référer Crochet de données Vue-routeurs pour comprendre cela. http://router.vuejs.org/en/pipeline/data.html

Le hook de transition de données est appelé lorsque l'itinéraire a été modifié et que le composant en cours est réutilisé.

Vous pouvez transmettre votre logique d'obtention des données dans le hook de transition de données et selon que l'itinéraire a: eventId, vous pouvez décider s'il s'agit d'une page de création ou d'ajout de page. Si c'est une page d'ajout, réinitialisez l'objet événement au tableau vide.

Vue.component('create', { 
    template: '#create', 
    data: function() { 
    return { 
     event: [] 
    } 
    }, 
    route: { 
    data: function(transition) { 
     if (transition.to.params.eventId) { //get events data if eventId is present in the route params 
     return this.$http.get({ 
      url: 'event/' + transition.to.params.eventId 
     }).then(function(response) { 
      return { 
      event: response.data 
      } 
     }, function() { 
      console.log('request failed') 
     }) 
     } else { // Its add mode, set event object to empty array 
     setTimeout(function() { 
      transition.next({ 
      event: [] 
      }) 
     }, 1000) 
     } 
    } 
    } 
}); 

également votre bouton Ajouter devrait ressembler à:

<a v-link="{name: 'create'}" class="btn btn-success"><i class="fa fa-plus"></i> Create New Event</a> 

Et modifier doit être:

<a v-link="{name: 'event', params: { eventId: 'Your Event Id'}}" class="btn btn-success"><i class="fa fa-plus"></i> Edit Event</a>