Eu tenho esse componente em VueJs que funciona como uma árvore e gostaria de implementar um botão que expandisse todos os nós dessa árvore. Eu estou tentando percorrer cada nó separadamente e adicioná-lo no array 'expandido' (esse array que me auxilia na lógica de expandir o nó), mas por algum motivo minha lógica não ta reconhecendo esse nó como expandido. Segue o código abaixo:
HTML de quando o componente é chamado:
<div>
<BlocoTextoArvore
:nos="consultas_blocos_texto_attributes"
:bloco_editado="edicao_bloco"
@onClick="noClicado"
/>
</div>
HTML do componente chamado:
<template>
<div>
<button @click="expandirTodos(nos)" v-if="nivel == 1">Expandir Todos</button>
<draggable class="draggable-list" :list="nos" :group="{name:'blocos_texto_draggable'}">
<div col mx-2 px-2 py-3 bg-light border-rounded
v-for="no in nos"
:key="no.identificador"
:style="no.nivel != 1 ? 'margin-left: 20px;' : 'margin-left: 0px'"
v-on="calcularOrdem(no, nos)"
>
<fieldset>
<span @click="noClicado(no)">
<legend>
{{estaExpandido(no) ? '▼' : '►'}}
<span v-if="no.tipo === 'epigrafe'">Epígrafe</span>
<span v-if="no.tipo === 'ementa'">Ementa</span>
<span v-if="no.tipo === 'preambulo'">Preâmbulo</span>
<span v-if="no.tipo === 'parte'">Parte</span>
<span v-if="no.tipo === 'livro'">Livro</span>
<span v-if="no.tipo === 'titulo'">Título</span>
<span v-if="no.tipo === 'capitulo'">Capítulo</span>
<span v-if="no.tipo === 'secao'">Seção</span>
<span v-if="no.tipo === 'subsecao'">Subseção</span>
<span v-if="no.tipo === 'tematica'">Temática</span>
<span v-if="no.tipo === 'artigo'">Artigo</span>
<span v-if="no.tipo === 'paragrafo'">Parágrafo</span>
<span v-if="no.tipo === 'inciso'">Inciso</span>
<span v-if="no.tipo === 'alinea'">Alínea</span>
<span v-if="no.tipo === 'item'">Item</span>
<span v-if="no.tipo === 'pontilhado'">Pontilhado</span>
</legend>
<table>
<tr>
<td class="blocoTexto" style="width: 96%;">
<div v-html="no.texto"/>
</td>
<td style="width: 2%;">
<img class="acoes" v-if="!bloco_editado.edicao" src="../../assets/imagens/icon-edit.svg" alt="Editar" title="Editar" @click="editar(no)"/>
</td>
<td style="width: 2%;">
<div class="botoes-acoes">
<button v-if="!bloco_editado.edicao" class="btn-exclusao" @click="opcoesExcluir(no)">
<img class="acoes" src="../../assets/imagens/icon-delete-preto.svg" alt="Excluir" title="Excluir" />
</button>
<div class="opcoes">
<p>Deseja mesmo excluir?</p>
<button class="btn-confirmar-exclusao" @click="excluir(no, nos)">
<img class="acoes" src="../../assets/imagens/icon-confirm.png" alt="Confirmar exclusão">
</button>
<button class="btn-cancelar-exclusao" @click="opcoesExcluir(no)">
<img class="acoes" src="../../assets/imagens/icon-close.png" alt="Cancelar exclusão">
</button>
</div>
</div>
</td>
</tr>
</table>
</span>
</fieldset>
<BlocoTextoArvore
v-if="estaExpandido(no) && no.consultas_blocos_texto_attributes"
:nos="no.consultas_blocos_texto_attributes"
:nivel="nivel + 1"
:bloco_editado="bloco_editado"
@onClick="(no) => $emit('onClick', no)"
/>
{{ expandido }}
</div>
</draggable>
</div>
</template>
JavaScript do componente chamado:
<script>
import draggable from "vuedraggable";
export default {
name: "BlocoTextoArvore",
props: {
nos: Array,
bloco_editado: Object,
nivel: {
type: Number,
default: 1,
},
},
data() {
return {
expandido: [],
};
},
watch: {
//expandido(newValue) {
// newValue.map(function(element) {
// console.log(element)
// })
//}
//nos: {
// deep: true,
// handler: (newRoot) => {
// console.log(newRoot);
// newRoot.map(function(element) {
// console.log(element)
// })
// },
//},
},
methods: {
expandirTodos(nos) {
nos.forEach(element => {
this.noClicado(element);
if (element.consultas_blocos_texto_attributes) {
this.expandirTodos(element.consultas_blocos_texto_attributes);
}
});
},
estaExpandido(no) {
no.nivel = this.nivel;
return this.expandido.indexOf(no) !== -1;
},
noClicado(no) {
if (!this.estaExpandido(no)) {
this.expandido.push(no);
} else {
this.expandido.splice(this.expandido.indexOf(no));
}
},
calcularOrdem(no, nos) {
no.ordem = nos.indexOf(no) + 1;
}
},
components: {
draggable,
},
</script>