Validation of input fields using vuelidate is essential. The input field in question is dynamic, as the value is populated dynamically with jsonData through the use of v-model.
The objective:
Upon blur, the goal is to display an error if there is one; however, when typing inside the input field, no errors are shown.
My current approach involves the following for the 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>
To monitor changes, I display $v on the UI, but unfortunately, no modifications are detected when typing in the input field.
Regarding 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>
The server provides data in the format
{ "businessid": "8126815643", "businessname": "manish",}Issue:
Initially, when the page loads, the input field displays manish. However, upon changing it and focusing out, an error message stating name is required appears. The cause of this issue remains unclear.
2:Dynamic Form- Check Here
Please review https://i.stack.imgur.com/OLRF7.png