javascript - How to validate dynamic input field in vue.js? - Stack Overflow

admin管理员组

文章数量:1404357

I am using vuelidate to validate input field, the input field is dynamic i.e the value in input field is filled dynamically with jsonData using v-model

What I am trying to do is

On blur I want to show error if there is any, but here when I type anything inside my input field it shows nothing

what I am doing:- my input field

    <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>

I am displaying $v on UI to check but when I type in input field no changes is been detected

My script code :-

    <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>

My data from server is in format like this { "businessid": "8126815643", "businessname": "manish",}

Issue Initially when page loads in input field it shows manish so when I change it to something else and focus out it shows error that name is required I don't what is going wrong

2:Dynamic Form- Check Here

please check this

I am using vuelidate to validate input field, the input field is dynamic i.e the value in input field is filled dynamically with jsonData using v-model

What I am trying to do is

On blur I want to show error if there is any, but here when I type anything inside my input field it shows nothing

what I am doing:- my input field

    <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>

I am displaying $v on UI to check but when I type in input field no changes is been detected

My script code :-

    <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>

My data from server is in format like this { "businessid": "8126815643", "businessname": "manish",}

Issue Initially when page loads in input field it shows manish so when I change it to something else and focus out it shows error that name is required I don't what is going wrong

2:Dynamic Form- Check Here

please check this

• javascript
• vue.js
• vuelidate

Share Improve this question Follow edited Nov 6, 2019 at 6:20 manish thakur asked Nov 6, 2019 at 6:08 manish thakurmanish thakur 8201010 gold badges4343 silver badges8383 bronze badges 6

• You need to check this - sub-collections-validation – sugars Commented Nov 6, 2019 at 6:17
• @sugars that didn't help as my input field values are dynamic,please check my code if you can help accordingly – manish thakur Commented Nov 6, 2019 at 6:29
• Your v-model seems to be written like this, v-model="$v.form.name.$model" or v-model="data.businessname.$model" – sugars Commented Nov 6, 2019 at 6:34
• @sugars No, if I use v-model="$v.form.name.$model" then my input field is empty which is not the case or if I use v-model="data.businessname.$model" then also input field is empty and on typing throws error – manish thakur Commented Nov 6, 2019 at 6:40
• All your inputs will have an id “name” in the v-for (I know it’s not what you are after, but I have to mention it) – muka.gergely Commented Nov 6, 2019 at 6:49

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

According to vuelidate's documentation, you should make the following changes:

<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 }
      }
    }
 }

Attach my codesandbox example link

本文标签： javascriptHow to validate dynamic input field in vuejsStack Overflow