v-For

时间:2019-06-06 03:54:19

标签: vuejs2 vue-component

我有一个Vue组件,具有主导航->导航选项卡和导航屏幕->边栏。当我尝试在for循环中为每个屏幕使用屏幕数据(vm.tabdata)时,出现警告 组件渲染函数中的无限更新循环 ,但是页面加载正常。请帮助解决此问题。

我尝试创建选项卡数组的单独副本,但警告仍然存在。

Vue.component( "print-panel", {
    template:
    `<div>
        <div v-for="(navItem, navindex) in navInfoData" :key="navindex">
            {{loadSection(ev,navItem.sectionID)}}
            <div class="singleview-section-title">
                {{ navItem.sectionName.firstLine }} - {{ navItem.sectionName.secondLine }}
            </div>
            <template v-if="navItem && navItem.screens">
                <div v-for="(navTab, tabindex) in navItem.screens" :key="tabindex">
                {{loadScreen(ev,navTab.id,tabindex)}}
                    <div class = "singleview-screen-title">
                        {{ navTab.name }}
                    </div>
                    <print-module
                        :form-view-obj="formViewObj"
                        :print-data="printElement"
                        :collections="collections"
                        :form-const="formConst"
                        :info-text-collection="infoTextCollection"
                        :tool-tip-collection="toolTipCollection">
                    </print-module>
                </div>
            </template>
        </div>
    </div>`,
    data: function() {
        return {
            ev:0,
            formEvent: null,
            subTitle: '',
            col: 6,
            colNum: 2,
            colArr: [],
            navData: [],
        }
    },

    props: [
        'formViewObj',
        'collections',
        'tabData',
        'formConst',
        'infoTextCollection',
        'toolTipCollection'
    ],

    computed: {
        navInfoData() {
            this.navData = _.clone(vm.navInfo);
            return this.navData;
        },
        currentEvent() {
            console.log( '##########################################################################################################' );
            return this.formEvent;
        },

        printElement() {
            console.log( 'load Elements' );
            let printData = [];
            //printData =[...vm.tabData];
            //printData =_.clone(vm.tabData);
            //printData = JSON.parse(JSON.stringify(vm.tabData));
            //printData = vm.tabData;
            printData = _.map(vm.tabData, function(data){
                return data;
            });
            return printData;
        },
    },

    methods: {
        loadSection (e,n) {
            vm.changeSection(e,n);
        },
        loadScreen (e,n,i) {
            vm.changeScreen(e,n,i);
        },


    },

});

0 个答案:

没有答案