Question

我有一个列表，如果单击以打开它并列出子列表，则发出请求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的调用

Answer 1

看看这个例子，数据在文件夹public / data中

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

vue动态组件，重复信息

1 个答案: