Vue динамические компоненты, повторите информацию

Vue динамические компоненты, повторите информацию

18.09.2019 06:20:52 Просмотров 44 Источник

У меня есть список, который, если вы нажмете, чтобы открыть его и перечислить детей, вы сделаете запрос ajax для загрузки данных и нарисуете дополнительный список, компонент, который выполняет эту работу, является тем же самым, рекурсивным и загружается на детей через динамические компоненты, проблема в том, что при загрузке детей второго списка. и открывает третью, они повторяются.

изображение дерева

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

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

что-то вроде этого https://codepen.io/anthonygore/pen/PJKNqa?editors=1010 , но каждый элемент является вызовом api

У вопроса есть решение - Посмотреть?

Ответы - Vue динамические компоненты, повторите информацию / vue dynamic components, repeat info

Является ответом!
jonellrz

19.09.2019 04:11:14

посмотрите на этот пример, данные находятся в папке public / data

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

Edit Vue Template

Закрыть X