Можно ли каким то образом скрывать дочерний элемент если у родителя есть определенный класс?
1 ответ
У родителя есть массив классов parentClass
, если массив содержит класс hideChildClass, то ребенок не отображается(реализовано через v-if)
В данном случае экземпляр Vue является родителем, но если это будет компонент, то все тоже будет работать.
const child = {
template: '<div class="child">Я ребенок</div>'
}
new Vue({
el: '#app',
components: { child },
data: () => {
const hideChildClass = 'hide-child'
return {
hideChildClass,
parentClass: [hideChildClass, 'parent-class']
}
},
methods: {
toggle () {
if (this.parentClass.includes(this.hideChildClass))
this.parentClass = this.parentClass.filter(i => i !== this.hideChildClass)
else
this.parentClass.push(this.hideChildClass)
}
}
})
.parent-class {
border: 1px solid black;
}
.child {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div :class="parentClass">
Я родитель, мои классы: {{ parentClass }}<br>
<child v-if="!parentClass.includes(hideChildClass)"></child>
<button @click="toggle">Переключить класс</button>
</div>
</div>