0

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

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

我尝试了以下方法，但不起作用：

  • 在 v-link 中设置 eventId: null
  • 通过 v-on:click 将 eventId 设置为 null
  • 设置 eventId 为：this.$route.params.eventId

Router Map：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));
    },
  }
 });
4

1 回答 1

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>
于 2016-08-30T18:31:22.010 回答