clickOutside: 0,
methods: {
outside: function(e) {
this.clickOutside += 1
// eslint-disable-next-line
console.log('clicked outside!')
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
// Provided expression must evaluate to a function.
if (typeof binding.value !== 'function') {
const compName = vNode.context.name
let warn = `[Vue-click-outside:] provided expression '${binding.expression}'
is not a function, but has to be`
if (compName) { warn += `Found in component '${compName}'` }
// eslint-disable-next-line
console.warn(warn)
}
// Define Handler and cache it on the element
const bubble = binding.modifiers.bubble
const handler = (e) => {
if (bubble || (!el.contains(e.target) && el !== e.target)) {
binding.value(e)
}
}
// eslint-disable-next-line
el.__vueClickOutside__ = handler
// add Event Listeners
document.addEventListener('click', handler)
},
unbind: function(el, binding) {
// Remove Event Listeners
// eslint-disable-next-line
document.removeEventListener('click', el.__vueClickOutside__)
// eslint-disable-next-line
el.__vueClickOutside__ = null
}
}
}<input
class="form-control bg-light-blue"
id="SearchText"
type="text"
v-model="search"
/>
<ul class="list-inline" v-if="showSearchHistory" v-click-outside="outside">
<li
class="list-inline-item list-group-item-primary"
v-for="(item, index) in searchHistory
.slice(-5)
.reverse()
.map((s) => s.trim())"
:key="index"
@click="selectPreviousSearch(index)"
>
{{ item }}
</li>
</ul>Onclick of input, li tag will open and then i want to close li tag. If user click outside the li tag. To do that i am counting the event, when clicked outside of li.
But now i want to close the li with some event on it.
In the console now i am able to see, When user clicked outside, now i am able to count the value.