vuex - Vue.js 2.0 中提交表单的全局捕获

Question

我的应用程序中有许多具有重复操作的表单...

<form @submit.prevent="save" novalidate 
   ...

并保存方法..

save () {
   ...
   return this.saveEvent(payload)
      .then(() => { self.resetForm() })
      .catch(resp => { 
         if (resp.status === 400) {   
           // verry repetitive task!!
         }
      })

注意.catch(resp => { ... })

在我的应用程序的所有表单中，我需要使用这个 catch 来处理表单字段和服务器响应。

所以，我的问题是，如何在 Vue.js 中处理重复的捕获任务？如何创建指令或组件，我的所有表单都将使用仅在一个地方处理服务器响应和表单字段的组件。

试过了

我创建了一个名为v-catch-errors

<form @submit.prevent="save" novalidate v-catch-errors
   ...

但是，如何处理该指令中的 ajax 操作？

Answer 1

.then() 和 .catch() 都是函数，所以我将使用您的重复代码创建一个新方法。就像是：

methods: {
  save () {
    var self = this
    return this.saveEvent(payload)
      .then(() => { self.resetForm() })
      .catch(resp => { 
        if (resp.status === 400) {
          self.repetitiveTask()
        }
      })
  },
  repetitiveTask () {
    // verry repetitive task!!
  }
}

我这样做了var self = this，您可以在不同的范围内调用该repetitiveTask()方法。