bootstrap-vue table, Formatter callback error: You may have an infinite update loop in a component render function

Question

I'm using bootstrap-vue table, according to documentation regarding formatter callback: https://bootstrap-vue.org/docs/components/table .

A variable is defined in data(), I will need this variable as a flag to control the cell content.

  data() {
    return {
      aFlag: 0,
    }
  }

Then in the fields I use the formatter call back:

{ key: 'value', label: 'Value', formatter: this.updateValue},

In the methods area I use updateValue to update the flag:

  methods: {
    updateValue(value) {
      ..
      aFlag = value
      ..
    }
  }

Then error "You may have an infinite update loop in a component render function." happened here.

If I want to do such a thing, is there any best practice? The cell content may cause other cell's change, so currently I use a variable to control the behavior as a flag. Thanks in adavance.

Will Blair Will Blair · Accepted Answer · 2021-02-01T11:09:01

The formatter callback is only intended to change how the value is displayed to the user, not change its value.

If you want to be able to change the value, I'd suggest using a slot for the value property and use v-model on a form component within the slot:

<template v-slot:cell(value)="data">
    <input type="text" v-model="data.value"/>
</template>

bootstrap-vue table, Formatter callback error: You may have an infinite update loop in a component render function

1 Answers