vue.js - 带有 VeeValidate 的多个 Vue 表单不能在同一页面上工作
问题描述
我正在尝试在同一个 Vue 组件上使用多个带有 VeeValidate 验证的表单并且没有任何运气。我尝试将验证限制在特定范围内,但它似乎没有识别它们。第一个视图(注册 4 个字段)工作正常。但是,如果您单击登录视图,则验证不会显示在那里,而是会延续到注册视图的前两个字段)。任何帮助将不胜感激。
https://codepen.io/admrbsn/pen/qGrEqz
HTML:
<div id="mainContainer">
<!-- Join -->
<div v-if="!showLogIn">
<h5>Join</h5>
<p>Already have an account? <span v-on:click="showLogIn = true">Log in here</span></p>
<form @submit.prevent="validateAndJoin('join')" data-vv-scope="join">
<label for="first_name">First Name</label>
<input v-model="visitor.first_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.first_name') }" id="first_name" name="first_name" data-vv-as="first name" placeholder="Your first name"
autocomplete="off" />
<div v-show="errors.has('join.first_name')" class="invalid-feedback">{{ errors.first('join.first_name') }}</div>
<label for="last_name">Last Name</label>
<input v-model="visitor.last_name" v-validate="'required'" type="text" :class="{'input': true, 'is-invalid': errors.has('join.last_name') }" id="last_name" name="last_name" data-vv-as="last name" placeholder="Your last name"
autocomplete="off" />
<div v-show="errors.has('join.last_name')" class="invalid-feedback">{{ errors.first('join.last_name') }}</div>
<label for="emailAddress">Email Address</label>
<input v-model="visitor.emailAddress" v-validate="'required|email'" type="email" :class="{'input': true, 'is-invalid': errors.has('join.emailAddress') }" id="emailAddress" name="emailAddress" data-vv-as="email address"
placeholder="Your email address" autocomplete="off" />
<div v-show="errors.has('join.emailAddress')" class="invalid-feedback">{{ errors.first('join.emailAddress') }}</div>
<label for="password">Password</label>
<input v-model="visitor.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('join.password') }" id="password" name="password" data-vv-as="password" autocomplete="off" />
<div v-show="errors.has('join.password')" class="invalid-feedback">{{ errors.first('join.password') }}</div>
<button type="submit">Join</button>
</form>
</div>
<!-- Log in -->
<div v-if="showLogIn">
<h5>Log in to Peterson's</h5>
<p>Need an account? <span v-on:click="showLogIn = false">Join</span></p>
<form @submit.prevent="validateAndLogIn('login')" data-vv-scope="login">
<label for="loginEmail">Email address</label>
<input v-model="user.email" v-validate="'required'" type="email" :class="{'input': true, 'is-invalid': errors.has('login.loginEmail') }" id="loginEmail" name="loginEmail" data-vv-as="email address" placeholder="Your email address"
autocomplete="off">
<div v-show="errors.has('login.loginEmail')" class="invalid-feedback">{{ errors.first('login.loginEmail') }}</div>
<label for="loginPassword">Password</label>
<input v-model="user.password" v-validate="'required'" type="password" :class="{'input': true, 'is-invalid': errors.has('login.loginPassword') }" id="loginPassword" name="loginPassword" data-vv-as="password" placeholder="Your password"
autocomplete="off">
<div v-show="errors.has('login.loginPassword')" class="invalid-feedback">{{ errors.first('login.loginPassword') }}</div>
<button type="submit">Log in</button>
</form>
</div>
</div>
视图:
Vue.use(VeeValidate);
var main = new Vue({
el: "#mainContainer",
props: {
showLogIn: false
},
data() {
return {
user: {
email: '',
password: ''
},
visitor: {
first_name: '',
last_name: '',
emailAddress: '',
password: ''
}
}
},
methods: {
validateAndJoin(scope) {
this.$validator.validateAll(scope).then(result => {
if (result) {
console.log('Submitted')
}
});
},
validateAndLogIn(scope) {
this.$validator.validateAll(scope).then(result => {
if (result) {
console.log('Submitted')
}
});
},
}
});
解决方案
仅供参考,问题是我使用 v-if。它与 VeeValidate 的呈现冲突。一个简单(但昂贵)的解决方法是改用 v-show 。由于我没有为每个加载太多,并且切换更有效,所以我坚持使用它。
推荐阅读
- scala - 使用scala查找spark中列值的差异
- apache-kafka - Kafka ISR 不断缩小和不同步副本
- javascript - JavaScript获取与另一个字段集中的每个值对应的字段值数组
- c# - 使用多个 async/await 复制文件时出现问题
- javascript - 输入日期javascript html(最小值和最大值)
- git - 如何解决“无法遍历提交的父母”?
- c++ - 现代 C++ 是否有任何等效/替代 boost::archive::iterators 的功能?
- python - Python算法/模型专门使计算机崩溃
- mysql - GROUP BY 使查询非常慢
- java - Spring server.forward-headers-strategy NATIVE vs FRAMEWORK