Question

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

当我想从编辑一个事件导航到创建另一个事件时，我无法弄清楚如何从组件中删除数据。

我尝试过以下无法解决的问题：

在v-link中设置eventId：null
通过v-on将eventId设置为null：单击
使用以下命令设置eventId：$。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-routers数据钩来理解这一点。 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>

重用Vue组件，删除数据

1 个答案: