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

Question

我有一个应该不断更改其数据的表。当在父组件中单击按钮时，将调用服务器，然后通过 prop 将 json 文件加载到子组件(表格)中。

每当单击不同的按钮并且表格需要重新加载数据时，它不会。我试过这样做:

this.$refs.dmTable.refreshTable();

和

this.$forceUpdate()

我的代码的粗略结构

父类.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>

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

编辑: 关于这一点需要注意的一件事是，我加载到该表中的数据非常大，有 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 的位置。将 this.data 设置为一个值是非 react 性(它在应用程序组件上创建非 react 性属性)。

试试这个:

<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 定义为您的应用程序/组件实例上的响应式属性。