**点击提交按钮时如何检查输入字段是否已完成?如果其中一个输入未完成,或者如果所有输入都已完成,我想提醒 - 在 App.vue 文件中显示一个组件。但是我的验证检查似乎不起作用。
<template>
<button class="btn" @click="submit">Submit</button>
</template>
<script>
export default {
methods: {
submit() {
if (
!this.firstName &&
!this.lastName &&
!this.paymentAmount &&
!this.accountNumber
) {
this.$emit("final");
} else {
alert("please fill the required fields");
}
},
},
inject: ["firstName", "lastName", "paymentAmount", "accountNumber"],
};
</script>
<style scoped>
.btn {
padding: 10px 30px;
}
</style>
https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Button.vue**
您只需要将您的输入包装在一个
<form>
元素(小写!)中以获得原生表单验证。
// Form.vue
<template>
<form ref="myForm">
<KeepAlive>
<component :is="currentStep" @previous="previousStep" @next="nextStep" />
</KeepAlive>
</form>
</template>
您还可以使用
this.$refs.myForm. checkValidity()
以编程方式检查有效性。