다른 VUEj 내부에 컨테이너를 렌더링

다른 VUEj 내부에 컨테이너를 렌더링

나에게는 아버지와 재귀적인 아들이 있다.데이터 채우기 템플릿은 api에서 로드됩니다.

어떤 아이를 열었을 때, 모든 아이가 열리게 되고, 모든 손자의 내용이 모든 자녀에게 반복되는 문제

트리를 만들려고 합니다.각 아이가 자신의 아이를 호출하는 등의 호출이 Fetch requests입니다.

저는 여기에 갇혀 있고, 이러한 경우 VUE가 어떻게 작동하는지 잘 이해하지 못하기 때문에 질문을 드리겠습니다. 감사합니다.

https://codepen.io/anthonygore/pen/PJKNqa?editors=1010,과 같은 것이지만 각 항목은 api에 대한 호출입니다.

나무 이미지

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;
        }
    },

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>

언급URL : https://stackoverflow.com/questions/57993363/render-a-container-inside-another-vuejs