Добавить класс при клике другому div
224
20 декабря 2018, 17:50
Есть несколько 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>Answer 1
jQuery тут явно лишний. Первое что пришло в голову, не очень изящный способ, но работает
new Vue({
el: '#app',
methods: {
toggleClass(event) {
event.target.nextElementSibling.classList.toggle('open');
}
}
});#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>
<div id="app">
<div class="select" @click="toggleClass">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ option_box: true }">
<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 }">
<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 }">
<li class="option" v-for="n in 6">{{ n }}</li>
</ul>
</div>
</div>Answer 2
Не советую так повторяться в хтмл, можно использовать v-for чтобы отображать похожие элементы, в моем варианте этот подход и задействован.
Также обратите что data должно быть функцией.
new Vue({
el: '#app',
data: () => ({
options: [
{
length: 3,
isOpen: false
},
{
length: 5,
isOpen: false
},
{
length: 6,
isOpen: false
}
]
}),
methods: {
toggleClass (option) {
console.log(option)
option.isOpen = !option.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
v-for="(option, i) in options"
:key="i"
class="select"
>
<div class="input_val" @click="toggleClass(option)">
<input class="input" type="hidden">
</div>
<ul :class="{ option_box: true, open: option.isOpen }">
<li class="option" v-for="n in option.length">{{ n }}</li>
</ul>
</div>
</div>Answer 3
Передавать индекс параметром в функцию
new Vue({
el: "#app",
data: {
openData: [{isOpen:false}, {isOpen:false}, {isOpen:false}],
},
methods: {
toggleClass(i) {
this.openData[i].isOpen = !this.openData[i].isOpen;
},
isOpen(i) {
return this.openData[i].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;
}
.open {
background: #fff;
}<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(0)">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ 'option_box': true, 'open': isOpen(0) }">
<li class="option" v-for="n in 3">{{ n }}</li>
</ul>
</div>
<div class="select" @click="toggleClass(1)">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ 'option_box': true, 'open': isOpen(1) }">
<li class="option" v-for="n in 5">{{ n }}</li>
</ul>
</div>
<div class="select" @click="toggleClass(2)">
<div class="input_val">
<input class="input" type="hidden">
</div>
<ul :class="{ 'option_box': true, 'open': isOpen(2) }">
<li class="option" v-for="n in 6">{{ n }}</li>
</ul>
</div>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47926 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23908 visits
- Как через css изменить цвет png изображения? 10405 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9280 visits
- Работа с captcha vk api 8148 visits
© "hostciti.net" 29.3.2025 | 12:02