Bootstrap-Vue Table 未使用 table.refresh() 更新

Question

我有一个 table 应该不断更改其数据。当在父组件中单击按钮时，将调用服务器，然后 json 文件通过 prop.

加载到子组件（table）中

每当单击不同的按钮并且 table 需要重新加载数据时，它不需要。我试过做：

this.$refs.dmTable.refreshTable();

和

this.$forceUpdate()

我的代码的粗略结构

Parent.vue

<template>
  <Button getData("this")>Get This Data</Button>
  <Button getData("that")>Get ThatData</Button>

  <MyTable v-if="showTable" :data="data" />
<template>

<script>
export default {
  data(){
    return{
      showTable:false,
      data: null
    }
  },
  methods:{
    getData(dataType){
      getDataFromServer(dataType).then(data =>{
        this.data = data.body
        this.showTable = true

      })    
    }
  }
}
</script>

MyTable.vue

<template>
  <b-table :items="data"><b-table/>
</template>

<script>
export default{
  props: ["data"]
}
</script>

如果单击第一个按钮，数据会很好地加载到 table。但是，如果您随后单击第二个按钮并尝试将新数据加载到 table 中，则没有任何反应。我尝试在包含 this.$refs.myTable.update() 的子组件中创建一个名为 updateTable() 的方法，但它什么也没做。

编辑： 有一点需要注意，我加载到这个 table 上的数据非常大，5mb json 文件。

实际调用的函数：

    showTableView(model, type) {
      request
        .get(
          `/table_files/${this.folder_name}/${model}.json`
        )
        .then(response => {
          this.type = type;
          this.current_model = model;
          if (type === "joins") {
            this.tlorderData = response.body.fields.joins;
            this.show_joins_table = true;
            this.showTable = false;
            this.refreshTable()
            return false; // MAYBE RETURNING FALSE BREAKS THE RERENDERING?
          } 
          else if (type === "dimension_groups") {
            this.show_joins_table = false;
            this.showTable = true;
            this.tlorderData = response.body.fields.dimension_groups;
            this.refreshTable()
            return false;
          }
        })
        .catch(err => {
          this.response_error = err;
        });
    },

Answer 1

我没看到你在主应用程序中定义 data 和 showTable component.setting this.data 的值不是反应性的（它正在创建一个应用程序组件上的非反应性属性）。

试试这个：

<template>
  <Button @click="getData('this')">Get This Data</Button>
  <Button @click="getData('that')">Get ThatData</Button>

  <MyTable v-if="showTable" :data="data" />
<template>

<script>
export default {
  data() {
    return {
      data: [],
      showTable: false
    }
  },
  methods:{
    getData(dataType){
      getDataFromServer(dataType).then(data =>{
        this.data = data.body
        this.showTable = true
      })    
    }
  }
}
</script>

data() 部分将 data 和 showTable 定义为您的 app/component 实例的反应属性。

Answer 2

问题出在我的代码中没有提到的地方。我将数据加载到 table 的方式是这样的：

<template>
  <b-table :items="reData"><b-table/>
</template>

<script>
export default{
  props: ["data"],
  data(){
    return{
      reData: this.data
    }
  }
}
</script>

这阻止了我的 table 在 prop 中的数据发生变化时进行更新，请注意，我正在将我的 prop 传递给 data()，然后将其传递给我的 table。所以道具会改变，但 table 显示的实际数据不会。

从 props 传递到 table 以防止这种情况发生的正确方法：

<template>
  <b-table :items="data"><b-table/>
</template>

<script>
export default{
  props: ["data"]
}
</script>

Bootstrap-Vue Table 未使用 table.refresh() 更新

Bootstrap-Vue Table not updating with table.refresh()

javascript

vue.js

bootstrap-vue