来自组件的Vue提交按钮未提交答案

【问题标题】：Vue submit button from component does not submit来自组件的Vue提交按钮未提交
【发布时间】：2017-11-19 12:47:03
【问题描述】：

我在 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>

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

我认为使用onClick 方法通过JS 强制提交相当容易，但我想了解为什么它不这样做。是浏览器的问题吗？安全问题？ Vue 问题？或者我错过的其他东西可能就在我面前？

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

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

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

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

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

Here's a fiddle.

【讨论】：

其中一次是对的！伙计，今天早上我有一个这样的人。
啊，不错。我有一种感觉，这是显而易见的。唯一的问题是我确实希望禁用按钮并拥有loading 类，无论是否有处理程序。我最终会使用 JS 强制提交，但你解开了谜题:)

【解决方案2】：

为了记录，这是我最终做的：

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()
    }
}

这允许我在点击时禁用表单并显示加载状态，但仍然强制提交。

【讨论】：