时间戳

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

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

问题描述

根据有关格式化程序回调的文档，我正在使用 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.jsbootstrap-vuebootstrap-table

解决方案

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

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

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

推荐阅读