我正在尝试根据上一个组件的一些选定属性来构建表:
我正在渲染一个名为“ branch-comparison ”的组件,以比较XML文件及其属性和值。该组件具有两个 Prop :
selectedEnvs :具有名称和对象的对象数组
commonFiles :具有名称和对象的文件数组
我正在使用vue-tables-2构建这些表。在模板的顶部,它运行一个名为getProps()的函数,以从每个文件生成一组所有可能的属性。我已经硬编码为0,因为目前我只允许用户一次选择1个文件。然后,它遍历每个文件(仅1个)并获取主表和比较表的数据。它们实际上是相同的功能(getHeadData和getTableData),但我现在将它们分开以进行进一步的自定义。代码对于实际生成表并不那么重要,但是其中的某些内容导致我的代码陷入无限循环。
在组件的初始渲染上,永远不会存在无限循环。一切都贯穿了一切,并且丝毫不折磨,并且效果出色。但是,一旦组件被渲染,我就更改了 Prop ,甚至只是将文件保存在编辑器中,然后vue-cli hot重新加载它,它就会进入无限循环。所有数据仍然可以正常生成,并且组件按预期运行。但是无论如何它都会循环101次。
我研究过的东西:
更改数据:我完全理解码件会在数据更改时重新呈现...但是我不相信我会在任何方法调用中更改任何反应式数据。我只是在函数内部局部声明它,然后将其返回给该临时变量。同样,如果是这种情况,我相信会在初始组件加载上进入无限循环,但这不是事实。仅在刷新或更改 Prop 时,它才会进入无限循环。
更改Vuex状态:我调查了此问题,但从未更改任何状态。我只是在getTableData和getHeadData方法中访问它。然后我想,也许分配一个变量以指向该状态对象会导致它基于访问状态的某些东西重新呈现,所以我尝试了
this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp
=> {
使用var x = JSON.parse(JSON.stringify(this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]])
然后x.forEach(envProp =>
但这仍然行不通。如果我注释掉调用getHeadData()和getTableData()的代码,它将循环经过适当的时间。
这是代码。.我还是Vue的新手,所以我不愿接受任何更一般的建议:
<template>
<div id="BranchComparison">
<div :set="info = getProps(0)">
<div class="file" v-for="(file, fileIdx) in commonFiles" :key="(file, fileIdx)">
<h3>{{ file }} </h3>
<b-row :set="mainTable = getHeadData(fileIdx, info.props, info.columns)">
<b-col class="mainBranch">
<h5 class="fileName"> {{ $store.state.branchSelection.split('.').slice(0, -1).join('.') }} <span style="font-size: 14px;">vs </span> </h5>
<v-client-table
:data="mainTable.data"
:columns="mainTable.columns"
:options="mainTableOptions"
size="small"
></v-client-table>
</b-col>
<b-col class="compareBranch" v-for="(branch, branchIdx) in $store.state.branchesToCompare" :key="(branch, branchIdx)">
<h5> {{ branch.name.split('.').slice(0, -1).join('.') }} </h5>
<v-client-table
:set="temp = getTableData(fileIdx, branchIdx, info.props, info.columns, mainTable)"
:data="temp.data"
:columns="temp.columns"
:options="temp.options"
size="small"
></v-client-table>
</b-col>
</b-row>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['selectedEnvs', 'commonFiles'],
data(){
return{
mainTableOptions:{
filterable: false,
filterByColumn: false,
perPage: 200,
pagination: {
show: false,
dropdown: false
},
sortable: [''],
resizableColumns: false,
},
}
},
methods: {
getTableData(fileIdx, branchIdx, props, columns, mainTable){
var data = []
var compareTableOptions = {
filterable: false,
perPage: 200,
pagination: {
show: false,
},
sortable: [''],
hiddenColumns: ['Property'],
resizableColumns: false,
cellClasses: {}
}
props.forEach(prop => {
var temp = { Property: prop }
this.selectedEnvs.forEach(env => {
var found = false;
this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
if(envProp){
if (prop == envProp["@name"]) {
compareTableOptions.cellClasses[env.name] = []
compareTableOptions.cellClasses[env.name].push({
class: 'same',
condition: row => {
try{
return row[env.name] == mainTable.data[i][env.name]
} catch{
console.log('This is a different problem ')
}
}
})
found = true;
temp[env.name] = envProp["@value"]
}
}
});
if (!found){
temp[env.name] = 'Not found'
}
})
data.push(temp)
});
return {
columns: columns,
data: data,
options: compareTableOptions
}
},
getHeadData(fileIdx, props, columns){
var data = []
props.forEach(prop => {
var temp = { Property: prop }
this.selectedEnvs.forEach(env => {
var found = false;
this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
if(envProp){
if (prop == envProp["@name"]) {
found = true;
temp[env.name] = envProp["@value"]
}
}
});
if (!found){
temp[env.name] = 'Not found'
}
})
data.push(temp)
});
return {
columns: columns,
data: data
}
},
getProps(fileIdx){
if(this.commonFiles.length == 0) return
var columns = ['Property']
var props = new Set()
this.selectedEnvs.forEach((env, idx) => {
columns.push(env.name)
this.$store.state.branchesToCompare.forEach(branch => {
branch.obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
if(prop){
props.add(prop["@name"])
}
})
});
this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
if(prop){
props.add(prop["@name"]);
}
});
});
var ret = { props: props, columns: columns }
return ret;
}
}
}
</script>
最佳答案
我已经解决了上面的代码实际上很好。在我发布代码之前不久,我在v-for AND的getHeadData()中使用了计算属性,我想发生的是它是一个嵌套的计算属性,并且在内部循环上重新计算了它,然后尝试了外循环,依此类推。我仍然感到困惑,为什么它可以在初始渲染上工作,但是哦。现在正在工作。
关于javascript - Vue.js组件上的无限循环重新渲染,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/64070051/