bootstrap-vue 表，Formatter 回调错误：您可能在组件渲染函数中有无限更新循环答案

【问题标题】：bootstrap-vue table, Formatter callback error: You may have an infinite update loop in a component render functionbootstrap-vue 表，Formatter 回调错误：您可能在组件渲染函数中有无限更新循环
【发布时间】：2021-05-05 10:06:45
【问题描述】：

根据有关格式化程序回调的文档，我正在使用 bootstrap-vue 表：https://bootstrap-vue.org/docs/components/table。

在data()中定义了一个变量，我需要这个变量作为标志来控制单元格内容。

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

然后在字段中我使用格式化程序回调：

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

在方法区我使用 updateValue 来更新标志：

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

然后错误“您可能在组件渲染函数中有无限更新循环。”发生在这里。

如果我想做这样的事情，有什么最佳做法吗？ 单元格内容可能会引起其他单元格的变化，所以目前我使用一个变量作为标志来控制行为。提前致谢。

【问题讨论】：

标签： vue.js bootstrap-vue bootstrap-table

【解决方案1】：

格式化程序回调仅用于更改值向用户显示的方式，而不是更改其值。

如果您希望能够更改值，我建议对 value 属性使用插槽并在插槽内的表单组件上使用 v-model：

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

【讨论】：