嘗試將VueJS與SemanticUI集成時不會阻止表單提交

Question

我正在嘗試將SemanticUI與Vue集成在一起，並且我有一個帶有表單的Login組件。

我在表單v-on:submit.prevent="onSubmit"添加了v-on:submit.prevent="onSubmit" ，但是當我在表單的一個字段上按Enter時，表單仍在提交，而我的方法從未調用。

基本上我想做的是從jQuery復制on("submit"事件。

知道有什么問題嗎？

main.js

import Vue       from "vue";
import VueRouter from "vue-router";
import App       from "./App";

Vue.use(VueRouter);

new Vue({
    el        : "#app",
    template  : "<App/>",
    components: { App }
});

和Login.vue

<template>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui teal header">
                Login
            </h2>

            <form class="ui large form login" v-on:submit.prevent="onSubmit">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="cloud icon"></i>
                            <input type="text" name="hostname" placeholder="Hostname" value="">
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="username" placeholder="Username" value="">
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="Password" value="">
                        </div>
                    </div>

                    <div class="ui fluid large teal submit button">Login</div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",

        mounted: function() {
            this.$nextTick(function() {     
                jQuery(this.$el).find("form").form({
                    fields: {
                        hostname: {
                            identifier: "hostname",
                            rules     : [{
                                type  : "empty",
                                prompt: "Please enter the instance hostname"
                            }]
                        },

                        username: {
                            identifier: "username",
                            rules     : [{
                                type  : "empty",
                                prompt: "Please enter your username"
                            }]
                        },

                        password: {
                            identifier: "password",
                            rules     : [{
                                type  : "empty",
                                prompt: "Please enter your password"
                            }]
                        }
                    }
                });
            });
        },

        methods: {
            onSubmit: function(e) {
                alert("ok");
            }
        }
    };
</script>

Answer 1

如果表單具有以下任一內容，則將按ENTER鍵提交：

• 內部的一個button ， 沒有 type="button"
• input標簽的type="submit"

您的表格似乎沒有以上任何一種。 但是，假設您在其他位置有一個提交按鈕，可以通過以下方法避免表單提交：

<form onsubmit="return false;">
    <input type="text" placeholder="Host Name" v-model="hostName">
    <input type="text" placeholder="User Name" v-model="userName">
    <input type="password" placeholder="Password" v-model="password">
    <input type="submit" value="Submit form">
</form>

請注意，該表單具有onsubmit="return false;" 這樣可以防止意外提交。

這不會阻止您在Vue組件中使用通過使用@click="submitLoginForm()"的按鈕啟動的方法來使用this.$http.post(...)提交this.$http.post(...)