[英]Form submit is not prevented when trying to integrate VueJS with SemanticUI
I'm trying to integrate SemanticUI with Vue and I have a Login component with a form in it. 我正在尝试将SemanticUI与Vue集成在一起,并且我有一个带有表单的Login组件。
I've added v-on:submit.prevent="onSubmit"
to the form but when I press enter on one of the form's fields the form still submits and my method ie never called. 我在表单
v-on:submit.prevent="onSubmit"
添加了v-on:submit.prevent="onSubmit"
,但是当我在表单的一个字段上按Enter时,表单仍在提交,而我的方法从未调用。
Basically what I'm trying to do is replicate the on("submit"
event from jQuery. 基本上我想做的是从jQuery复制
on("submit"
事件。
Any idea what's the problem? 知道有什么问题吗?
main.js 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 }
});
and Login.vue 和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>
A form will submit on ENTER key if it has one of the following: 如果表单具有以下任一内容,则将按ENTER键提交:
button
inside, without type="button"
button
, 没有 type="button"
input
tag with type="submit"
input
标签的type="submit"
Your form does not seem to have either of the above. 您的表格似乎没有以上任何一种。 But assuming you have a submit button elsewhere, here is how you can avoid form 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>
Note that the form has onsubmit="return false;"
请注意,该表单具有
onsubmit="return false;"
which prevents accidental submission. 这样可以防止意外提交。
This does not stop you from using a method in Vue component, initiated via a button using @click="submitLoginForm()"
, to do the submission using this.$http.post(...)
这不会阻止您在Vue组件中使用通过使用
@click="submitLoginForm()"
的按钮启动的方法来使用this.$http.post(...)
提交this.$http.post(...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.