シンプルなイベント システムに vue-router を使用してコンポーネント システムをセットアップしました。既存のイベントの編集と新しいイベントの作成の両方に同じコンポーネントを使用できるようにしたいと考えています。
あるイベントの編集から別のイベントの作成に移動するときに、コンポーネントからデータを削除する方法がわかりません。
次のことを試しましたが、うまくいきません。
- v-link で eventId: null を設定する
- v-on:click を使用して eventId を null に設定する
- eventId の設定: this.$route.params.eventId
ルーター マップ: create と eventDashboard ルートは同じコンポーネントを指します。
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'),
},
},
},
})
新しいイベントを作成するために使用するボタンは次のとおりです。
<a v-link="{name: 'create', params: { eventId: null }, replace: true}" class="btn btn-success"><i class="fa fa-plus"></i> Create New Event</a>
そしてコンポーネント:
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));
},
}
});