Error : You may have an infinite update loop in a component render function

Question

我是 vuejs 的新手。我正在尝试根据某些条件在 table 上显示复选框。使用 bootstrapvue 库作为复选框。下面是我的代码，

模板：

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

所有 "ONLINE" 值都没有出现任何错误。但是如果任何行有 "OFFLINE" 然后得到无限循环错误。我已经理解问题是因为 this.checked 的突变问题。但是没有办法解决它。任何帮助都会有所帮助。提前致谢。

Answer 1

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

实现的

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

谢谢

Error : You may have an infinite update loop in a component render function

Error : You may have an infinite update loop in a component render function

vue.js

vuejs2

v-for

bootstrap-vue