CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to close li tag when clicked outside in Vuejs?

  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.

Upvotes: 0

Views: 383

Answers (1)

nook
nook

Reputation: 1884

There is indeed the v-click-outside proposed by @linus-borg here: https://jsfiddle.net/Linusborg/Lx49LaL8/

You attach a function that will be triggered every time a click happens anywhere outside of the element on which you attached it

UPDATE:

From what I see, you have a function outside defined in your component, this is where you control whether the dropdown should be shown or not.

export default {
  /* ... */
  methods: {
    outside() {
      this.showSearchHistory = false;
    },
  },
  /* ... */
};

Upvotes: 1

Related Questions