Level 73
@troj something like this codepen here?
Jan 3, 2020
10
Level 4
Close on click outside element in Vue
Hi,
I've made this autocomplete functionality (with the help of youtube). Everything is working great. But one thing i cant figure out. And i know it has to do something with eventlisteners. But how to implement that in this code, i aint got no clue. Hope someone can help me with that.
I would like the dropdown to disappear when someone clicks outside it.
methods:{
autoComplete (){
this.results=[];
//alert(this.searchText);
if(this.searchText !== '') {
axios.post(this.bUrl + '/search', {
searchText:this.searchText
})
.then((response) =>{
console.log(response);
app.results = response.data;
})
}
}
}
Level 14
Something like the below method should work:
clickOutsideElement(e) {
if (!this.$el.contains(e.target)) {
this.DropdownOpen = false; // or whatever logic would close your dropdown
}
},
Level 4
@nakov Yes exactely something like that. But i'm struggling to combine this with my code.
Level 4
@mstrauss Do i need to add this inside the methods? And where do i need to add the clickOutsideElement in my blade?
Level 73
@troj I cannot see your full component. I don't know what flag you use to decide if the dropdown is opened or not.
You can add a blur event to your component, and trigger an action/method on blur, exactly like the codepen does..
So on the component @blur="onBlur" and in the methods add :
onBlur: function () {
this.dropdownOpen = false; // or whatever flag you use here for the dropdown component.
},
Level 4
@nakov I'll have to try this later, need to visit my girlfriend right now :-) Thanks for your answer. I'll try this as soon as i'get back.
Level 4
@nakov I managed to get the onBlur function to hide the dropdown when clicked outside the dropdown. But now my results arn't cklickable anymore. I can click on them but then the onBlur activates before the result has the opportunity to be activated.
Level 47
don't use onBlur , it is not accurate. you can create a method to determine if click outside, javascript has a function called closest() .
if you want , you can create a custom vue plugin then you can use globally
clickOutSide (e) {
if (e.target.closest('.yourModalClass')) {
return
} else {
//do something
}
}
Level 4
Thanks @maverickchan . But why is the onBlur not accurate? I just found an solution to my problem with @mousedown.prevent="toggled" on my link.
But you're telling me it's better not to use onBlur at all?
Level 47
you can't control click once or twice , in your case maybe ok , but , if you click somewhere important after onblur, that will be no time left for you to cancel
Please or to participate in this conversation.