Vue.js 计数器变量导致无限循环答案

【问题标题】：Vue.js counter variable causing infinite loopVue.js 计数器变量导致无限循环
【发布时间】：2020-12-09 06:31:01
【问题描述】：

所以，我有一些数据进入并呈现一个列数不确定的表。我想计算这些列以在页脚中正确显示 colspan td。我初始化了一个名为 footerCallspan 的变量，其值为 2...

var app = new Vue({
  el: '#order-products',
  data: {
    footerColspan: 2, // default to 2 for title and quantity
  },
  //...

我的页脚表格单元格看起来像 ...

<td v-bind:colspan="footerColspan" class="summary">some text</td>

主表中的每一列都检查一个函数以确定它们是否应该显示...

<th v-if="checkShowField(null, 'field_name')"scope="col">Name</th>

最后，这个函数看起来像......

checkShowField(p, field) {
  let pTest = p;
  if (p == null) {
    pTest = this.products[Object.keys(this.products)[0]];
  }
  if (pTest.hasOwnProperty(field)){
    if (p == null) { // only increment on header row
      // let span = this.footerColspan + 1;
      // alert(span);
      // this.footerColspan = span;
      // alert(this.footerColspan);
    }
    return true;
  }
  return false;
},

无论我如何尝试在该函数中增加footerColspan，它似乎都会创建一个无限循环。

我是 Vue 的新手，所以我不确定尝试增加该变量是否会导致表重新渲染，从而触发对该函数的更多调用或什么。

这里有人有什么指导吗？如果没有，还有其他关于我的目的计算列数的建议吗？

谢谢！

【问题讨论】：

您可以作弊并使用非常大的colspan 值，即您期望的最大列数。如果只想跨越所有列，colspan 值可以等于或大于列数
你能发布this.products obj 的样子吗？您不应该在 checkShowField 函数中增加 footerSpan。这可以使用计算域来确定。
@Phil - 我昨天在某个地方看到了。不幸的是，我需要使用最后两列。所以，基本上我正在寻找的是 colspan 的 n-2 列。
@steven - this.products 是一个产品集合，由它们的 id 键控，每个产品都有多个属性（大多数字符串，但有几个数组）。但有些属性用于显示，有些用于计算。所以，我不能只计算其中的属性数量并使用它。

标签： vue.js

【解决方案1】：

我怀疑您的无限循环问题是由在 v-if 检查中增加 this.footerColspan 引起的。基本上footerColspan 是反应式的，每次更改都会重绘，然后v-if 再次更改它，因此是无限循环。

如果有您的产品结构示例以及确定要显示的列的因素，那么尝试提出计算列数的解决方案会更容易

【讨论】：

我将把它标记为正确答案，因为它确实阐明了为什么会发生无限循环并帮助我理解为什么该策略注定要失败。最终，我将根据要传递到页面中的一组可能的可视列来检查列，并且我还可以使用它来计算 colspan 的列。