重用Vue组件，删除数据

Question

我已经使用vue-router为一个简单的事件系统设置了一个组件系统。我希望能够使用相同的组件来编辑现有事件和创建新事件。

我想不出如何从编辑一个事件导航到创建另一个事件时从组件中删除数据。

我曾尝试下面的东西，它不工作：

• 设置EVENTID：空在V-LINK
• 设置EVENTID通过为空V系列：点击
• 设置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)); 
    }, 
    } 
}); 

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>