Reusing Vue Component, removing data - vue.js

Question

I have setup a component system using vue-router for a simple event system. I'd like to be able to be able to use the same component for both editing existing events and creating new events.
I can't figure out how to remove the data from the component when I want to navigating from editing one event to creating another.
I have tried the following things, which don't work:
setting eventId: null in v-link
setting eventId to null through v-on:click
setting eventId with: this.$route.params.eventId
Router Map: the create and the eventDashboard route point to the same component.
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'),
},
},
},
})
Here is the button used to create a new event:
<a v-link="{name: 'create', params: { eventId: null }, replace: true}" class="btn btn-success"><i class="fa fa-plus"></i> Create New Event</a>
And component:
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

Please refer vue-routers data hook to understand this. http://router.vuejs.org/en/pipeline/data.html
Data transition hook is called when the route has changed and the current component is reused.
You can pass your logic of getting the data in the data transition hook and based on whether the route has :eventId, you can decide if it is a create page or add page. If its an add page reset the event object to empty array.
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)
}
}
}
});
Also your add button should be like:
<a v-link="{name: 'create'}" class="btn btn-success"><i class="fa fa-plus"></i> Create New Event</a>
And edit should be:
<a v-link="{name: 'event', params: { eventId: 'Your Event Id'}}" class="btn btn-success"><i class="fa fa-plus"></i> Edit Event</a>