如何重用 Bootstrap-Vue 重用项目提供程序功能来更新 b 表中的异步项目？

Question

我正在使用 Bootstrap-Vue v2.0.0-rc.11，我只是不知道如何更新表格内容。我确信这很微不足道。

我正在使用项目提供程序功能从后端提取内容。

        <b-table
                 :items="myProvider"
        >

使用以下方法进行初始调用效果很好。

export default {
    methods: {
        myProvider(ctx) {
            let promise = axios.get('/backend?currentPage=' + ctx.currentPage);

            return promise.then((response) => {
                return(response.items || []);
            });
        },

要复制行项目，我打开一个模式来输入新名称。我对复制进行了后端调用，效果很好。现在我想刷新显示新项目的表中显示的内容。我该怎么做呢？

我能想到的最简单的方法是再次调用项目提供程序函数（此处：“myProvider”）。我可以从模式中执行此操作，但无法提供正确的参数（此处：“ctx”）。

是否有一个事件可以触发/发出以重新发出后端调用？

我尝试过类似的事情：

this.$refs.nameOfTable.$forceUpdate()

this.$refs.nameOfTable.$emit('XXX') // XXX = placeholder for various events

任何提示表示赞赏！谢谢你。

Answer 1

它隐藏在文档中，但这只是对表引用的简单刷新（）调用。

<b-table ref="table" ... ></b-table>
this.$refs.table.refresh();

来自文档的强制刷新表数据部分。

Answer 2

现在刷新不起作用

您可以使用“key”属性代替。

<b-table key="key" ... ></b-table>

data() {
  return {
    key: 1
  }

this.key += 1

Answer 3

您还可以通过在$root上发出事件refresh::table来触发提供程序函数的刷新，其中单个参数是您的b表的id。您的桌子上必须有一个唯一的 ID 才能正常工作。

this.$root.$emit('bv::refresh::table', 'my-table')

或者通过调用表引用上的refresh()方法：

this.$refs.table.refresh()

文档链接：https://bootstrap-vue.org/docs/components/table#force-refreshing-of-table-data