javascript - 当我在 vue js 中切换选择框时，如何将 Vuelidate 用于新字段？

Question

这是我的模板。我只想在使用 Vuelidate 出现电子邮件字段时验证电子邮件。

<div>
    <label>DO you have Email ? </label>
 <span class="text-danger" v-if="$v.your_email.$error">Pleaase Select Field</span>
    <select v-model="your_email" @change="toggle()">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
</div>
<div v-if="show==true">
 <input type="email" v-model="email">
</div>
<button @click="save()">Save</button>

这是我的脚本，我在其中创建称为切换的方法。当我切换第一个字段时。然后新字段将出现，我想验证其他明智的不验证。

<script>
  import {required, email} from "vuelidate/lib/validators";
export default {
 validations:{
   your_email:{required},
 }
data(){
      return{
        your_email:"no",
        email:null,
        show:false;
      }
    },
  methods:{
    toggle(){ 
      if(this.your_email=="yes"){
        this.show==true;   
       }else{
         this.show==false;
       }  
     },
    save() {
       this.$v.$touch()
         if (this.$v.$error) {
           setTimeout(() => {
             this.$v.$reset()
           }, 3000);
         } else {
           alert('Saved Successfully')
          }
     }
   }
}
<script>

标签： javascriptvue.jsvuelidate