错误：组件渲染功能中可能有无限的更新循环

Question

我是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",
}]

对于所有“在线”值均未收到任何错误。但是，如果任何行都具有“ OFFLINE”，则会出现无限循环错误。我已经了解到这个问题是因为this.checked的突变问题。但是没有解决方案。任何帮助都会有所帮助。预先感谢。

Answer 1

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

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

谢谢