Estoy construyendo una estructura en forma de árbol en vue . Intenté hacer esto con la función de datos, pero en ese caso, todos los elementos en el mismo nivel del árbol obtienen estas clases, aunque solo quiero hacer clic en el elemento para lograrlo. Intenté esto con la referencia pero no sé cómo lograrlo. ese selector de elemento principal se separa, ya que soy nuevo en Vue hasta ahora, no sé cómo abordar esto.
this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down");Eche un vistazo a una de las soluciones (si lo entendí correctamente) en el siguiente fragmento
new Vue({ el: '#demo', data() { return { tree: [ {parent: 'AAA', childs: []}, {parent: 'BBB', childs: [{child: 'bbb'}, {child: 'ccc'}]}, {parent: 'CCC', childs: [{child: 'ddd'}, {child: 'eee'}, {child: 'fff'}]}, {parent: 'DDD', childs: []} ], selected: null, active: null } }, methods: { select(item, idx) { if (this.tree[idx].childs.length) { this.selected = idx this.active = null } else { this.active = item.parent + idx this.selected = null } }, activate(itm, i) { this.active = itm.child + i } } }) li { cursor: pointer; } .active { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <ul> <li v-for="(item, idx) in tree" :key="idx"> <p @click="select(item, idx)" :class="active === item.parent + idx ? 'active' : ''">{{ item.parent }}</p> <ul v-if="selected === idx"> <li v-for="(itm, i) in item.childs" :key="i"> <p @click="activate(itm, i)" :class="active === itm.child + i ? 'active' : ''">{{ itm.child }}</p> </li> </ul> </li> </ul> </div>