Как повесить обработчик событии вне зоны компонента?

Question

[Руслан Абсалямов]

У меня есть компонент select и проблема возникла, я не пойму как вне зоны компонента если пользователь чекнул, то срабатывало событие
Мой пример

<template>
    <div class="select-app">
        <input type="text" class="field-form" :value="name" @click="onClick" :placeholder="`Выберите ${placeholder.toLowerCase()}`">
        <transition name="fade">
            <ul v-show="disabled">
                <li v-for="option in options" @click="checkOption(option)" :class="{ active: option.id === id }">
                    <span>{{ option.name }}</span>
                </li>
            </ul>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "BaseSelect",
        props: ["options", "placeholder"],
        data() {
            return {
                name: null,
                id: null,
                disabled: false
            }
        },
        methods: {
            onClick() {
                return this.disabled = this.disabled !== true;
            },
            checkOption(value) {
                this.name = value.name;
                this.id = value.id;
                this.disabled = false;
            }
        },
        created() {
            document.addEventListener("onclick", this.onClick)
        }
    }
</script>

Я думал что на дом повесить обработчик типо document.addEventListener("onclick", this.onClick) Но почему то не сработало

Answer 1

[Владимир Проскурин]

Не onclick а click
document.addEventListener("click", this.onClick)

Comments

[Руслан Абсалямов]

Такой вопрос, сейчас он мне перестал открывать вообще.
Вот компонент сам в песочнице
То есть если убрать событие на клие, то все нормально сработает, но не сработает если на другую область я кликну. И там еще другой момен, таких компонентов примерно 3 на странице. Я думал как может стоп сделать, пока что не понял куда я должен событие должен кинуть, чтобы было все нормально

[Владимир Проскурин]

Руслан Абсалямов, да, т.к. вы слушаете клик по всему документу, включая его потомков, а значит и вашего селекта. т.е. сейчас выходит, то после клика на любое место, даже на ваш компонент, закрывается селект. Нужно смотреть, что пришло в event.target и закрывать, если это не наш компонент.
А вообще, можно взять готовую директиву, вот эту например.

Vue.directive('click-outside', {
  priority: 700,
  bind () {
    let self  = this
    this.event = function (event) { 
    	self.vm.$emit(self.expression,event) 
 	  }
    this.el.addEventListener('click', this.stopProp)
    document.body.addEventListener('click',this.event)
  },
  
  unbind() {
    this.el.removeEventListener('click', this.stopProp)
    document.body.removeEventListener('click',this.event)
  },
  stopProp(event) {event.stopPropagation() }
})

И потом юзать легко
<div v-click-outside="methodName"></div>

[Руслан Абсалямов]

Владимир Проскурин, v-click-outside="methodName" Это где юзать именно? когда передаю в компонент же верно?

[Владимир Проскурин]

Руслан Абсалямов, неудачный я исходник дал. Вот лучше эту штуку юзать https://www.npmjs.com/package/vue-clickaway вот так

[Руслан Абсалямов]

Владимир Проскурин, А так как понимаю я буду долго мучаться с event.target как понимаю?

[Владимир Проскурин]

Руслан Абсалямов, да не, это тоже легко

[Руслан Абсалямов]

Владимир Проскурин, А вот оно оказывается как делается

Answer 2

[Андрей Седышев]

Есть ещё всякие директивы типа https://github.com/ndelvalle/v-click-outside