Vueコンポーネントを再利用してデータを削除

Question

シンプルなイベントシステムにvue-routerを使ってコンポーネントシステムをセットアップしました。私は、既存のイベントの編集と新しいイベントの作成の両方に同じコンポーネントを使用できるようにしたいと考えています。

あるイベントの編集から別のイベントの編集に移動するときに、コンポーネントからデータを削除する方法がわかりません。

私は動作しません。次のこと、試してみました：V-上を通じてnullにイベントIDを設定

V-LINKにヌル：イベントIDを設定

• をしてイベントIDを設定
• をクリックしてください：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)); 
    }, 
    } 
}); 

Answer 1

これを理解するためにVUE-ルータのデータフックを参照してください。 http://router.vuejs.org/en/pipeline/data.html

ルートが変更され、現在のコンポーネントが再利用されると、データ遷移フックが呼び出されます。

データ移行フック内のデータを取得するロジックを渡すことができます。また、ルートにはeventIdがあるかどうかに基づいて、作成ページか追加ページかを判断できます。その追加ページがイベントオブジェクトを空の配列にリセットする場合。

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) 
     } 
    } 
    } 
}); 

また、あなたの追加ボタンは次のようにする必要があります：

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

し、[編集]は次のようになります。

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