在 Vuetify Stepper 内部时，Handsontable 不会立即显示

Question

将 Handsontable HotTable 组件放置在 Vuetify Stepper 中时，Handsontable 仅在您单击页面上的某处后可见。但是，如果我将 HotTable 组件放在 Stepper 之外，它将立即显示。它应该立即在步骤 1 中可见。

为了演示这种意外行为，我在 CodePen 上 fork 了 Vuetify Stepper 示例并添加了“handsontable”和“@handsontable/vue”。

Vuetify Stepper with Handsontable on CodePen

<div id="app">
  <v-app id="inspire">
    <v-stepper v-model="e1">
      <v-stepper-header>
        <v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step :complete="e1 > 2" step="2">Name of step 2</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step step="3">Name of step 3</v-stepper-step>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          >
            <div id="hot-preview">
              <hot-table :settings="hotSettings"></hot-table>
            </div>
          </v-card>
          <v-btn
            color="primary"
            @click="e1 = 2"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="2">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 3"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="3">
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 1"
          >
            Continue
          </v-btn>
          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-app>
</div>

---

new Vue({
  el: '#app',
  data () {
    return {
      e1: 0,
      hotSettings: {
        data: Handsontable.helper.createEmptySpreadsheetData(1, 8),
        colHeaders: true,
        rowHeaders: true
      }
    }
  },
  components: {
    HotTable
  }
});

Answer 1

我认为问题是因为您在安装组件之前对其进行了初始化。
尝试在 mounted 钩子(Hook)中初始化它:

hotSettings: {
    data: null,

//...

mounted() {
    this.hotSettings.data = Handsontable.helper.createEmptySpreadsheetData(1, 8)
}