1

Estoy creando un árbol dinámico, cuando se hace clic para abrir el hijo, este hace una petición ajax para obtener los hijos y luego llama a un componente para pintar sus datos dentro (debajo) del padre.

uso componentes dinámicos, el problema es que si abres un segundo hijo, este remplaza el contenido del primero.

el componente que pinta la lista, es el mismo, es recursivo,

creo que el problema esta cuando llamo a child_component para colocar el nombre del componente y cargarlo, al ser la misma variable, esta remplaza todas las anteriores, (creo pensar que es eso)

Pero no se como resolverlo, o alguna manera de conseguir los mismo.

introducir la descripción de la imagen aquí

import * from '....';

export default {
    name: 'cList',
    components : {
        itett,
    },
    props : ['id', 'entity', 'treeData'],
    data  : ()=>{return{
        loading: true,
        tree: {},
        child_component: false,
        tdata: false,
    }},
    methods: {
        clop: function(state, uid, ev){
            let _childs = document.querySelector(`[data-idml="${uid}"]`);
            if( _childs ) {
                switch (state) {
                    case 'close': _childs.classList.add('hide'); break;
                    case 'open' : _childs.classList.remove('hide'); this.getChildren(uid); break;
                }
            }
        },
        getChildren: function( uid ){
            this.child_component = false;
            let _tdata = {};
            let de   = uid.split('_');
            let _elm = Entity.create({ is: de[0], id: de[1] });
            let tot  = _elm.childs.length - 1, cnt = 0;

            _elm.childs.forEach((et, ix) => {
                if( _elm.type && _elm.id ) {
                    ApiEntity.getList({
                        entity: et,
                        parents: [+_elm.id],
                        parentType: _elm.type,
                        cascade: false,
                    }).then(res => {
                        if( Array.isArray(res) ) {
                            _tdata[et] = res;
                        }
                        if( cnt >= tot ) {
                            this.tdata = _tdata;
                            this.child_component = 'cList';
                        }
                        cnt++;
                    }).catch( err => { console.error( err ); });
                }
            });
        },

        seeMore: function(uid){ }

    },
    beforeMount: function(){
        this.tree = {};
        if( this.entity ) {
            Entity.fetch(this.entity)
            .then(res => {
                this.tree[this.entity] = res;
                this.loading = false;
            }).catch( err => { console.error( err ); });

        } else if( this.treeData ) {
            this.tree = this.treeData;
            this.loading = false;
        }
    },

}
<template>
  <div class="ch_list">
      <template v-if="loading"> Loading.... </template>
      <template v-else>
      <ul class="lsitm" v-for="(value, name, ig) in tree" :key="ig">
          <li v-for="(elm) in value" :key="elm.uid">
              <itett class="ls_line" :data="elm" @clop="clop"></itett>
              <div class="ls_childs hide" :data-idml="elm.uid">
                  <div class="ch_header"></div>
                  <!-- <keep-alive> -->
                      <component v-bind:is="child_component" :treeData="tdata"></component>
                  <!-- </keep-alive> -->
                  <div class="ch_more"> <button @click="seeMore(`${entity}_${id}`, $event)">see mas</button> </div>
              </div>
          </li>
      </ul>
      </template>
   </div>
</template>

1 respuesta 1

1

mira este ejemplo, los datos estan emulados en json, en la carpeta public/data

https://codesandbox.io/s/vue-template-ntkmh?fontsize=14

Edit Vue Template

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.