Vuetify v-data-table does hides rows on data refresh

Question

I have a datatable that loads some json array after a file is added to a v-file-input. The v-data-table loads perfectly fine but if I close the v-drawer it sits in which has a close button that sets the v-data-table items prop (jsonData) to [] it clears the table which is great but when I reopen the drawer and reselect a file it loads the data to the table but all rows are hidden unless the user selects the number of items per page. Its like it sets itself to 0 when the data refreshes. Is there anyway to keep it from doing that?

        <v-navigation-drawer v-model="importDrawer"
                         fixed
                         temporary
                         right
                         :width="1000">
        <v-container>
            <div class="ma-10">
                <v-icon color="primary" @@click="closeTrackerDrawer()">
                    mdi-close
                </v-icon>
                <h2 class="ma-10 text-center text-h5">
                    Import Tracker Table
                    <v-icon color="primary">
                        mdi-cloud-upload
                    </v-icon>
                </h2>
                <v-alert v-model="alertUpload"
                         :type="alertType"
                         dismissible
                         elevation="2">
                    {{alertMessage}}
                </v-alert>
                <v-form ref="UploadTrackerForm" class="text-right"
                        lazy-validation>
                    @Html.AntiForgeryToken()
                    <v-file-input v-model="selectedFile"
                                  prepend-inner-icon="mdi-paperclip"
                                  prepend-icon=""
                                  filled
                                  accept="text/csv"
                                  :rules="csvRule"></v-file-input>
                    <v-data-table :headers="headersTracker"
                                  :items="jsonData"
                                  :items-per-page="5"
                                  height="inherit"
                                  style="cursor: pointer">
                    </v-data-table>
                    <v-btn color="primary"
                           class="pa-7"
                           block
                           @@click="importTrackerData"
                           :loading="loading"
                           :disabled="disabledUpload">
                        Submit
                    </v-btn>
                </v-form>
            </div>
        </v-container>
    </v-navigation-drawer>

Here are the methods:

        closeTrackerDrawer() {
            this.importDrawer = false
            this.alertUpload = false;
            this.jsonData = []
            this.$refs['UploadTrackerForm'].reset();
        },
        convertCSVtoJSON(value) {
            if (value == null) {
                this.jsonData = []
            }
            else {
                this.jsonData = this.cleanJsonData(value)
            }
        },

And I also watch on the selected file to convert to json to display in the table

        watch: {
        selectedFile : function () {
            let me = this
            if (this.selectedFile != null) {
                const csvData = Papa.parse(this.selectedFile, {
                    header: true,
                    dynamicTyping: true,
                    complete: function (results) {
                        me.convertCSVtoJSON(results["data"])
                    }
                });
            } else {
                me.convertCSVtoJSON(null)
            }
        }
    },

Vuetify v-data-table does hides rows on data refresh

0 Answers0