Javascript 函数在 vuejs 中无法正常工作 [英] Javascript functions are not working properly in the vuejs
问题描述
下面是我的代码.我想在提交期间验证表单.一世阻止提交操作，直到所有数据都有效.因此我使用了validata all()"方法.如果表单有空/无效日期，它应该警告未提交".否则它应该警告已提交".我的问题是那，当我第一次点击提交按钮时，警报显示为已提交"而不是未提交"Result1.但当我第二次或进一步点击同一个按钮时正确显示为未提交"Result2.我不知道原因，为什么它在第一次不起作用.
<div id="应用程序"><h1>添加项目</h1>产品名称 :<input type="text" name="product" v-validate="'required|alpha_dash'" ><span style="color:red;">{{errors.first('product')}}</span><br>产品价格 :<input type="number" name="price" v-validate="'required|min_value:100|max_value:500'"><span style="color:red;">{{errors.first('price')}}</span><br><button @click="submit">保存</button></模板><脚本>从'vue'导入Vue从 'vee-validate' 导入 VeeValidateVue.use(VeeValidate)导出默认{name: 'addEmpl',方法: {提交() {this.$validator.validateAll()如果 (!this.errors.any()) {警报('提交')}别的{alert('未提交')}}}}
Try .then(...) after validateAll() 方法:
this.$validator.validateAll().then((result) => {如果(！结果){alert('未提交')返回}警报('提交')}).catch(() => {//如果需要错误检查})此外，Github 页面上的类似案例也存在问题.你可以看看.
Below is my code. I would like to validate the form during submit. I prevented submit action untill all data is valid. Hence I have used "validata all()" method. If the form has null/invalid date, it should alert "not submitted".Else it should alert "submitted". My problem is that, when I clicked the submit button at first time, the alert displays as "submitted" instead of "not submitted" Result1. But when I clicked the same button for the second time or further it displays correctly as "not submitted" Result2. I don't know the reason, why it's not working in the first time.
<template>
<div id="app">
<h1>Add Items</h1>
Product Name :
<input type="text" name="product" v-validate="'required|alpha_dash'" >
<span style="color:red;">{{errors.first('product')}}</span>
<br>
Product Price :
<input type="number" name="price" v-validate="'required|min_value:100|max_value:500'">
<span style="color:red;">{{errors.first('price')}}</span>
<br>
<button @click="submit">Save</button>
</div>
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
export default {
name: 'addEmpl',
methods: {
submit() {
this.$validator.validateAll()
if (!this.errors.any()) {
alert('submitted')
}else{
alert('not submitted')
}
}
}
}
</script>
Try .then(...) after validateAll() method:
this.$validator.validateAll().then((result) => {
if(!result){
alert('not submitted')
return
}
alert('submitted')
}).catch(() => {
// error check if needed
})
Also, there is an issue for a case alike here on Github page. You can have a look.
这篇关于Javascript 函数在 vuejs 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
