【发布时间】：2021-01-12 03:21:08
【问题描述】：
我正在尝试根据前一个组件中的一些选定属性来构建表： 我正在渲染一个名为“branch-comparison”的组件来比较 XML 文件及其属性和值。这个组件有两个 props：
selectedEnvs：具有名称和对象的对象数组
commonFiles：具有名称和对象的文件数组
我正在使用 vue-tables-2 来构建这些表。在模板的顶部，它运行一个名为 getProps() 的函数，以从每个文件中生成一组所有可能的属性。我硬编码 0 因为目前我只让用户一次选择 1 个文件。然后它遍历每个文件（只有 1 个）并获取主表和比较表的数据。它们实际上是相同的功能（getHeadData 和 getTableData），但我现在将它们分开以进行进一步定制。代码对于实际生成表格并不是那么重要，但是它们内部的某些东西导致我的代码进入无限循环。
在组件的初始渲染上，永远不会出现无限循环。一切都贯穿了，根本不会破裂，而且效果很好。然而，一旦组件被渲染，我对 props 进行了更改，或者甚至只是将文件保存在编辑器中并 vue-cli 热重新加载它，它就会进入无限循环。所有数据仍然可以正常生成，并且组件按预期执行。但无论如何它都会循环 101 次。
我调查过的事情：
更改数据：我完全理解组件会在数据更改时重新呈现...但是我不相信我会在任何方法调用中更改任何反应性数据。我只是在函数内本地声明它并将其返回到该临时变量。此外，如果是这种情况，我相信它会在初始组件加载时进入无限循环，但事实并非如此。它仅在刷新或道具更改时进入无限循环。
改变 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>
【问题讨论】：
标签： javascript vue.js vuex vue-tables-2