解决vue3 element-plus @visible-change默认触发两次事件
vue3 element-plus @visible-change使用时触发两次事件请求的效果如下:
下拉框的构造code:
<el-form-item label="门店名称:" prop="sid" :rules="[ { required: true, message: '请选择门店' }]">
<el-select v-model="addTallyForm.sid" @visible-change="storeInfo" clearable placeholder="请选择门店">
<!-- :value--实际值; :label--显示值-->
<el-option
v-for="item in storeInfos"
:key="item.sid"
:value="item.sid"
:label="item.storeName"
>
{{item.storeName}}
</el-option>
</el-select>
<p>您选择的门店的Id是:{{addTallyForm.sid}}</p>
</el-form-item>
@visible-change="storeInfo"事件code:
storeInfo() {
const cardInfo = this.axios.post('storeinfo')
cardInfo.then((dd) => {
const res = dd
console.log(res)
if (res.data.code !== 1) {
alert("发生某些错误,请重试")
this.$router.push('/userIndex')
}
// turn in /home
if (res.data.code === 1)
this.storeInfos = res.data.data
console.log(this.storeInfos)
})
},
前端点击前:
点击时发送了请求:
选择后,可见console多发了一次请求:
vue3 element-plus @visible-change解决方案
注意:事件是会触发两次的,通过增加判断来选择性发送事件绑定的请求。
1、先判断默认未选中时,此框的默认值:通过console输出(console.log(this.addTallyForm.sid)
)识别最快。
2、此处增加一个判断,当清空选择框后,再次选择时,需重新发起事件进行同步最新数据。
3、if判断,当时选择框是默认(值为undefined)值或者清空后(值为空,非null),点击时需要发送请求,其余情况不发送。
因此只需改变script对应的事件触发代码,如下:
// 点击select框时触发的方法--获取商店列表
storeInfo() {
console.log(this.addTallyForm.sid)
// @visible-change触发事件默认会触发两次,第一次是点开下拉时,第二次是选中数据隐藏下拉时
// 对数据进行判别,数据为undefined或空时,才进行事件触发。
if(this.addTallyForm.sid == undefined || this.addTallyForm.sid == ""){
const cardInfo = this.axios.post('storeinfo')
cardInfo.then((dd) => {
const res = dd
console.log(res)
if (res.data.code !== 1) {
alert("发生某些错误,请重试")
this.$router.push('/userIndex')
}
// turn in /home
if (res.data.code === 1)
this.storeInfos = res.data.data
console.log(this.storeInfos)
})
}
},
效果:
至此,解决了@visible-change默认触发两次事件发送两次请求的问题。
PS:
:key="item.sid" //避免发生数据混乱
:value="item.sid" //绑定的实际值
:label="item.storeName" //前端界面需要的显示值