这个autoconpoent点击会触发一个事件
areaChange: function (value) {
let address = this.addressTmp.find(item => {
return item.fuzzyContent === value
})
if (address) {
this.newData.countryZH = address.countryZH
this.newData.countryEN = address.countryEN
this.newData.province = address.provinceZH
this.newData.provinceEN = address.province
this.newData.city = address.cityZH
this.newData.cityEN = address.city
this.newData.district = address.districtZH
this.newData.districtEN = address.district
this.newData.town = address.townZH
this.newData.townEN = address.town
this.fuzzyContent = value
}
},
我校验的就是这个newData.countryEN
我第一次打开这个modal的话,校验过了
第二次打开modal,虽然有值但是校验失败了
下面是前端代码
<Form ref="newData" :model="newData" :rules="newDataValidate" compact>
<Form-item :label="$t('address')" size="small" prop="countryEN">
---{{newData.countryEN}}
<AutoComplete
v-model="pageParams.queryParam"
@on-change="addressSearch"
@on-select="areaChange"
:placeholder="$t('area')">
<div>
<Option v-for="item in addressTmp" :value="item.fuzzyContent" :key="item.id">
<div class="title-info" v-html="item.fuzzyContentShow"></div>
</Option>
</div>
</AutoComplete>
</Form-item>
data () {
return {
isShow: false,
isShowAdd: false,
actived: -1,
opts: [],
data: {},
area: [],
newData: {countryEN: ''},
newDataValidate: {
countryEN: [{
required: true,
message: this.$t(`isRequired`, {msg: this.$t(`area`)}),
trigger: 'blur, change'
}],