如何验证 vue.js 中的动态输入字段?
How to validate dynamic input field in vue.js?
我正在使用 vuelidate
来验证输入字段,输入字段是动态的,即输入字段中的值使用 v-model
动态填充 jsonData
我想做的是
在模糊时,如果有任何错误,我想显示,但是在这里,当我在输入字段中键入任何内容时,它什么也没显示
我在做什么:- 我的输入字段
<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
我不知道出了什么问题
请检查这个
根据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 }
}
}
}
附上我的codesandbox示例link
我正在使用 vuelidate
来验证输入字段,输入字段是动态的,即输入字段中的值使用 v-model
jsonData
我想做的是
在模糊时,如果有任何错误,我想显示,但是在这里,当我在输入字段中键入任何内容时,它什么也没显示
我在做什么:- 我的输入字段
<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
我不知道出了什么问题
请检查这个
根据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 }
}
}
}
附上我的codesandbox示例link