错误：您可能在组件渲染函数中有无限更新循环答案

【问题标题】：Error : You may have an infinite update loop in a component render function错误：您可能在组件渲染函数中有无限更新循环
【发布时间】：2020-03-19 08:21:35
【问题描述】：

我是 vuejs 的新手。我正在尝试根据某些条件在表格上显示复选框。将 bootstrapvue lib 用于复选框。下面是我的代码，

模板：

<tr v-for="(item, index) in data" :key="index">
      <slot :row="item" >
        <td v-for="(column, index) in columns" :key="index" v-if="checkForCol(item, column)">
            <b-form-checkbox v-model="checked" name="check-button" disabled="disabled" switch></b-form-checkbox>
        </td>
        <td :key="index" v-else>
            <span v-if="hasValue(item, column)">
              {{itemValue(item, column)}}
            </span>
        </td>
      </slot>
    </tr>

脚本：

data() {
    return {
      checked : false
    }
  },
methods: {
    hasValue(item, column) {
      return item[column] !== "undefined"
    },
    checkForCol(item, column) {
      if(column === "statusInfo") {
        this.checked = item[column] === "ONLINE" ? true : false
        return true    
      }
    },
    itemValue(item, column) {
      return item[column]
    }
  }

列数据：

[{
"label": "label 1",
"id": "5f123456",
"statusInfo": "OFFLINE",
},
{
"label": "label 2",
"id": "5f1236786",
"statusInfo": "ONLINE",
}]

对于所有“在线”值都没有出现任何错误。但如果任何行有“离线”，那么就会出现无限循环错误。我已经理解这是由于 this.checked 的突变问题造成的问题。但是没有解决方案来解决它。任何帮助都会有所帮助。提前致谢。

【问题讨论】：

你能以列数据为例吗？
用数据更新了问题

标签： vue.js vuejs2 bootstrap-vue v-for

【解决方案1】：

我找到了替代组件vue-js-toggle-button，它接受直接值而不是将其绑定到数据变量。我的要求是通过vue-js-toggle-button 实现的。

随着对 Vuejs 的更多研究，如果有人有类似的需求，那么可以通过为行元素创建新组件并在每行组件内维护每行的状态来实现。如果需要更多详细信息，请告诉我，我很乐意发布一些代码示例。

谢谢

【讨论】：