如何验证vue.js中的动态输入字段?

我正在使用vuelidate来验证输入字段,该输入字段是动态的,即使用jsonDatav-model动态填充输入字段中的值

我想做的是

在模糊情况下,我想显示错误(如果有),但是当我在输入字段中键入任何内容时,它什么也没显示

我在做什么:-我的输入字段

    <div v-for="data in displayProfileData" :key="data.email" >
     <p>{{data}}</p>
   <div class="row">
       <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
                        <label for="phoneNo">Name</label>
              <input v-model="data.businessname"
              @blur="$v.form.name.$touch()"
              type="text" 
                            class="form-control" name="name"
                            id="name">
             <div v-if="$v.form.name.$error" class="form-error">
               <span v-if="!$v.form.name.required" class="text-danger">nameis required</span>
             </div>
                    </div>
          <p>{{$v}}</p>
   </div>
     </div>

我正在UI上显示$v进行检查,但是当我在输入字段中键入内容时,未检测到任何更改

我的脚本代码:-

    <script>
import { required,minLength } from 'vuelidate/lib/validators'
import axios from '../../services/base-api'
export default {
    data (){
      return{
          form :{
        name:''
          },displayProfileData:[]
      }
  },validations: {
    form: {
      name:{required},}
  },created(){
        this.userId = localStorage.getItem('user-Id')
        axios().post('/api/v1/Profile/getProfileData',this.userId)
        .then(res=>{
                console.log(res.data)
                this.displayProfileData=res.data

})
.catch(err=>{
    this.$toasted.error(err,{duration:2000})
})

}
}
</script>

我来自服务器的数据的格式为{ "businessid": "8126815643","businessname": "manish",}

问题 最初,当页面在输入字段中加载时,它会显示manish,因此当我将其更改为其他内容并突出显示时,它会显示错误消息,name is required我没有错

2Dynamic Form- Check Here

请选中此

如何验证vue.js中的动态输入字段?

tian_tang123 回答:如何验证vue.js中的动态输入字段?

根据vuelidate's documentation,您应该进行以下更改:

<div v-for="data in $v.displayProfileData.$each.$iter" :key="data.email">
  ...
  <input  v-model="data.businessname.$model"
          @blur="data.businessname.$touch()"
          type="text"
          class="form-control"
          name="name"
          id="name"
  >
  <div v-if="data.businessname.$error" class="form-error">
     <span v-if="!data.businessname.required" class="text-danger">name is required</span>
  </div>
...
</div>
 validations: {
    displayProfileData: {
      //required,//minLength: minLength(1),$each: {
        businessname: { required }
      }
    }
 }

附加我的代码和框示例link

本文链接:https://www.f2er.com/3154651.html

大家都在问