复用 Vue 组件，移除数据

Question

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

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

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

在 v-link
通过 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));
    },
  }
 });

Answer 1

请参考 vue-routers 数据挂钩以了解这一点。 http://router.vuejs.org/en/pipeline/data.html

当路由发生变化并重用当前组件时调用数据转换挂钩。

你可以把你获取数据的逻辑传入data transition hook，根据路由是否有: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 组件，移除数据

Reusing Vue Component, removing data

vue.js

vue-router

vue-component