У меня есть компонент select и проблема возникла, я не пойму как вне зоны компонента если пользователь чекнул, то срабатывало событие Мой пример
let options = [
{ id: 1, name: "hello" },
{ id: 2, name: "goodbuy" },
{ id: 3, name: "world" },
];
let placeholder = "Check";
new Vue({
el: "#app",
data: {
options: options,
placeholder: placeholder,
name: null,
id: null,
disabled: false
},
methods: {
closeOption() {
if (this.disabled) {
this.disabled = false;
}
},
onClick() {
this.disabled = this.disabled !== true;
},
checkOption(value) {
this.name = value.name;
this.id = value.id;
this.disabled = false;
}
},
created() {
document.addEventListener("click", this.closeOption)
}
})
.select-app {
width: 300px;
position: relative;
}
.select-app ul, .select-app input {
cursor: pointer;
}
.select-app input {
outline: none;
}
.select-app i {
position: absolute;
top: 6px;
right: 3px;
}
.select-app ul {
position: absolute;
z-index: 1;
background: #fefefe;
width: 100%;
list-style-type: none;
padding: 10px 0;
border: 1px solid #e5e5e5;
box-shadow: -1px 1px 8px 0px #c3b8b8 75;
border-radius: 4px;
top: 0;
}
.select-app ul span {
padding: 15px;
}
.select-app ul .active {
background: #f7f7f7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<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>
</div>
Я думал что на дом повесить обработчик типо document.addEventListener("click", this.onClick) Но почему то не сработало
created
,updated
и т.д. и дальше уже добавлять, как привели в вопросе.