Vue.js 2.0 中提交表单的全局捕获答案

【问题标题】：Global catch for submit forms in Vue.js 2.0Vue.js 2.0 中提交表单的全局捕获
【发布时间】：2017-02-19 02:57:21
【问题描述】：

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

<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 操作？

【问题讨论】：

你的问题不是很清楚。
@SadoOgie 我编辑我的问题

标签： vuex vue.js vuejs2

【解决方案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() 方法。

【讨论】：