handsontable 中更新内容数据的问题

Question

我正在尝试实施 handsontable。根据我的要求，我想通过更改下拉值重新呈现 handsontable，但是在下拉选择中，handsontable 没有正确更新。下面是我的代码：

Handsontable.vue:

<template>
  <div id="hot-preview">
    <HotTable :settings="settings" :ref="referenceId"></HotTable>
    <div></div>
  </div>
</template>

<script>
import { HotTable } from '@handsontable-pro/vue';

export default {
  components: {
    HotTable
  },
  props: ['settings', 'referenceId'],
}
</script>

<style>
#hot-preview {
  max-width: 1050px;
  height: 400px;
  overflow: hidden;
}
</style>

父组件:

<template>
  <div id="provisioning-app">
    <v-container grid-list-xl fluid>
      <v-select
          :items="selectList"
          item-text="elementName"
          item-value="elementName"
          label="Standard"
          v-model="selected"></v-select>
        <handsontable :settings.sync="settings" :referenceId="referenceId"></handsontable>
     </v-container>
  </div>
</template>

<script>
import Handsontable from '@/components/Handsontable';
import PrevisioningService from '@/services/api/PrevisioningService';

export default {
  components: {
    Handsontable
  },
  data: () => ({
    selectList: [],
    selectApp: [],
    selectedOption: '',
    referenceId: 'provision-table',
  }),

  created(){
    PrevisioningService.getProvisioningList(this.$session.get('userId'), this.$session.get('customerId')).then(response => {
      this.provisioningList = response;
    });
  },

  beforeUpdate() {
    this.provisioningApp = this.getProvisioningAppList;
  },
  computed: {
    settings () {
      return {
          data: this.getSelectApp,
          colHeaders: ["Data Uploaded on", "Duration in Minutes", "Start Time", "Shift","Description","Next Day Spill Over", "Site Name"],
          columns: [
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'},
            {type: 'text'}
          ],
          rowHeaders: true,
          dropdownMenu: true,
          filters: true,
          rowHeaders: true,
          search: true,
          columnSorting: true,
          manualRowMove: true,
          manualColumnMove: true,
          contextMenu: true,
          afterChange: function (change, source) {
            alert("after change");
          },
          beforeUpdate: function (change, source) {
            alert("before update");
          }
        }
    },

    getSelectApp () {
      if(this.selectedOption !== undefined && this.selectedOption !== null && this.selectedOption !== ''){
        PrevisioningService.getProvisioningAppList(this.selectedOption, this.$session.get('userId'), this.$session.get('customerId')).then(response => {
          this.provisioningApp = response;
          return this.provisioningApp;
        });
      }
    }
  },
  method: {
    getSelected () {
      return this.selectedOption;
    }
  }
};
</script>

使用上面的代码，我的数据从服务器成功接收，但是我无法更新handsontable中的数据，如下截图所示：

如何在下拉选择后正确呈现 table？

Answer 1

我看到两个问题：

handsontable 似乎无法处理动态 settings（参见 console errors），因此 settings 不应是计算的属性 .由于唯一需要更新的设置属性是 settings.data，因此应该单独更改属性（即不要重置 settings 的值）。

为了解决这个问题，将 settings 移动到 data()，将 settings.data 初始化为 null 以便它仍然是反应式的：
```
data() {
  settings: {
    data: null,
    colHeaders: [...],
    ...
  }
},
computed: {
  // settings() { }  // DELETE THIS
}
```
getSelectApp 是计算的属性，它是错误的异步（即，在这种情况下，它获取数据并稍后处理响应）。计算的属性不能是异步的，所以这个计算的属性实际上是 returns undefined。虽然在计算属性中有一个 return 调用，但 return 不会设置计算属性的值，因为它在 Promise callback 中：
```
PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
  this.provisioningApp = response;
  return this.provisioningApp; // DOES NOT SET COMPUTED PROPERTY VALUE
});
```
还要注意 this.provisioningApp = response 中的。在任何情况下，此代码似乎都不需要 this.provisionApp，因此应将其删除以进行清理。

这个计算属性的目的似乎是根据所选选项的值更新 settings.data。为此，您必须在 selectedOption 上使用 watcher，这将更改 settings.data.
```
watch: {
  selectedOption(val) {
    PrevisioningService.getProvisioningAppList(/*...*/).then(response => {
      this.settings.data = response;
    });
  }
},
```

demo

handsontable 中更新内容数据的问题

Issue with update content data in handsontable

handsontable

vue.js

vue-component

vuejs2