When placing the Handsontable HotTable component inside of a Vuetify Stepper the Handsontable is only visible after you click somewhere on the page. But if I place the HotTable component outside of the Stepper it would be shown immediately. It should be visible inside step 1 immediately.
To demonstrate this unexpected behavior I forked the Vuetify Stepper example on CodePen and added “handsontable” and “@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
}
});