Question

我正在尝试对同一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：

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')
        }
      });
    },
  }
});

Answer 1

仅供参考，问题是我使用v-if。它与VeeValidate的呈现冲突。一个简单（但昂贵）的解决方案是改用v-show。由于我没有为每个任务加载太多，并且切换效率更高，所以我坚持使用它。

多个带有VeeValidate的Vue表单无法在同一页面上运行

1 个答案: