I am using element-ui and vuejs. I have a select element that looks like this
<el-form-item label="City" prop="city">
<el-select
v-model="form.city"
multiple
filterable
remote
auto-complete = "address-level2"
no-match-text = "No data found"
:remote-method = "remoteMethod"
:loading = "loading"
placeholder="Select City">
<el-option
v-for = "(item,index) in cities"
:key = "index"
:label = "item.name"
:value = "item.key"
></el-option>
</el-select>
</el-form-item>
Now I want to trigger the blur event of this select after user selects an option so that the dropdown option collapses.
This is my remote method
remoteMethod: _.throttle(function(query) {
this.loading = true;
axios({
method: 'get',
url: someUrl
}).then(response =>{
if(response.data.status === false){
this.$notify.error({
title: 'Error',
message: response.data.message
});
}
else if(response.data.status === true && response.data.data.length != 0){
this.loading = false;
this.cities = response.data.data;
}
})
}, 1500),
you can set ref property on the component just like ref="select1"
and then you can call focus or blur method by this.$refs
just like: this.$refs.select1.focus()