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

Question

I am new to vuejs. I am trying to display checkbox on a table based on some condition. using bootstrapvue lib for checkbox. Below is my code,

template :

<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>

Script :

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

Column data:

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

for all "ONLINE" values not getting any error. but if any row is having "OFFLINE" then getting the infinite loop error. I have understood the problem that it is because of the mutation issue of this.checked. But don't have solution to resolve it. Any help would be helpful. Thanks in advance.

Answer 1

I have found alternative component vue-js-toggle-button which accepts the direct value instead of binding it to data variable. my requirement is achieved with vue-js-toggle-button .

With more studies about Vuejs, if any one has similar requirement then this can be achieved by creating new component for row element and maintaining statues of each row inside the each row component. If need more details let me know, I am happy to post some code sample.

Thanks