我有一个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);
},
},
});