[英]Form submit is not prevented when trying to integrate VueJS with SemanticUI
我正在尝试将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>
如果表单具有以下任一内容,则将按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(...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.