Есть несколько select
-oв. Если мы на него кликаем добовляется class="open"
нашему списку. Как это можно реализовать на Vue.js. С помощью JQ это получается реализовать:
methods: {
toggleClass(e) {
$(e.currentTarget).children('.option_box').toggleClass('open');
}
}
а без него не выходит.
new Vue({
el: "#app",
data: {
isOpen: false
},
methods: {
toggleClass(e) {
this.isOpen = !this.isOpen
}
}
})
#app {
display: flex;
}
.select {
margin: 0 10px;
}
.input_val {
height: 30px;
width: 50px;
border: 1px solid #777;
background: #ccc;
cursor: pointer;
}
.option_box {
width: 50px;
text-align: center;
border: 1px solid #777;
background: #ccc;
display: none;
}
.option_box.open {
display: block;
}
ul {
list-style-type: none;
padding: 0;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<div class="select" @click="toggleClass">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ option_box: true, open: isOpen }">
<li class="option" v-for="n in 3">{{ n }}</li>
</ul>
</div>
<div class="select" @click="toggleClass">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ option_box: true, open: isOpen }">
<li class="option" v-for="n in 5">{{ n }}</li>
</ul>
</div>
<div class="select" @click="toggleClass">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ option_box: true, open: isOpen }">
<li class="option" v-for="n in 6">{{ n }}</li>
</ul>
</div>
</div>