组件中的Vue提交按钮不提交

我在Vue中有一个组件，我使用替代提交按钮。我可以将一个处理程序传递给它，组件在禁用本身并将其设置为加载状态后调用它，并且它可以在错误发生后恢复（再次启用自身），并在一切顺利时显示出漂亮的成功动画。这种运作良好，用下面的代码：组件中的Vue提交按钮不提交

// Submit.vue 
<template> 
    <button :type="type" :class="classes" :disabled="loading" @click="onClick"> 
     <span class="flag" v-if="flag"></span> 
     <slot></slot> 
    </button> 
</template> 

<script> 
    import _ from 'lodash' 
    export default { 
     name: 'submit', 
     props: { 
      brand: { 
       type: String, 
       default: 'primary' 
      }, 
      // If no handler is provided, will fallback to normal submit button 
      handler: { 
       type: Function, 
       required: false 
      }, 
      flag: { 
       type: Boolean, 
       default: false 
      } 
     }, 
     data() { 
      return { 
       loading: false, 
       success: false 
      } 
     }, 
     computed: { 
      type() { 
       return typeof this.handler !== 'undefined' ? 'button' : 'submit' 
      }, 
      classes() { 
       return [ 
        `btn btn-${this.brand}`, 
        this.loading && !this.success ? 'loading' : null, 
        this.success ? 'success' : null 
       ] 
      } 
     }, 
     methods: { 
      onClick (event) { 
       if (this.success) { 
        event.preventDefault() 
        return 
       } 
       this.loading = true 
       if (typeof this.handler !== 'undefined') { 
        // Handler must return a Promise 
        this.handler.call() 
         .then(_.bind(() => { 
          this.onSuccess() 
         }, this)) 
         .catch(() => {}) 
         .then(_.bind(() => { 
          this.loading = false 
         }, this)) 
       } 
      }, 
      resetSuccess() { 
       this.success = false 
      }, 
      onSuccess() { 
       this.success = true 
       setTimeout(this.resetSuccess, 2000) 
      } 
     } 
    } 
</script>

它回落到一个正常的，如果没有处理程序传递提交按钮，假设所有你想要的是自动禁用表单提交时的按钮。唯一的问题是当我单击从组件创建的按钮时，表单未提交。

我认为这将是相当容易强制提交通过JS与onClick方法，但我想明白为什么它没有。这是浏览器问题吗？安全问题？ Vue的问题？或者我错过的东西可能就在我面前？

这里有一个快速测试一个的jsfiddle：https://jsfiddle.net/03fgwgy5/ 代码是不完全一样，因为我使用的是单文件组件，但要点是相同的，可以很容易地观察到的行为。

来源

2017-06-16 Tomas Buteler

在检查是否存在handler之前，您正在将loading设置为false。由于您将按钮的disabled属性绑定到loading，因此您将禁用该按钮并阻止触发本机点击事件。

只需设置loading属性，您已经检查的处理程序后：

if (typeof this.handler !== 'undefined') { 
    this.loading = true; 
    ... 
}

Here's a fiddle.

来源

2017-06-16 17:06:09 thanksd

@TomasButeler哈哈，好吧，这是实际的答案 – thanksd

其中一个时间就是对的！今天早上我有一个这样的人。 – Bert

啊，很好。我有一种感觉，这是明显的。唯一的问题是，我希望按钮被禁用，并且不管是否有处理程序，都有'loading'类。我将最终使用JS来强制提交，但你解决了谜题:) –

为了记录在案，这里是我落得这样做：

onClick (event) { 
    if (this.success) { 
     event.preventDefault() 
     return 
    } 
    this.loading = true 
    if (typeof this.handler !== 'undefined') { 
     // Handler must return a Promise 
     this.handler.call() 
      .then(_.bind(() => { 
       this.onSuccess() 
      }, this)) 
      .catch(() => {}) 
      .then(_.bind(() => { 
       this.loading = false 
      }, this)) 
    } else { 
     this.$el.form.submit() 
    } 
}

这使得我通过点击禁用表单并显示加载状态，但仍然强制提交。

来源

2017-06-16 18:44:30

组件中的Vue提交按钮不提交

回答

相关问题