Screen Cast

On scroll window “crash”

<template>
    <q-dialog ref="dialog" persistent maximized>
        <q-layout view="hHh lpR fFf" container>
            <q-header bordered class="bg-white">
                <q-toolbar
                    class="bg-primary text-white"
                    v-if="options.length == 0"
                >
                    <q-toolbar-title>
                        <strong>Filtros</strong>
                    </q-toolbar-title>
                    <q-btn flat dense icon="fas fa-times" @click="close" />
                </q-toolbar>
                <q-toolbar class="bg-primary text-white" v-else>
                    <q-toolbar-title>
                        <strong>FILTER</strong>
                    </q-toolbar-title>
                </q-toolbar>
                <q-toolbar
                    class="bg-white text-grey"
                    v-if="options.length > 10"
                >
                    <q-checkbox
                        dense
                        class="custom-checkbox"
                        v-model="checkAll"
                    />
                    <q-toolbar-title>
                        <q-input
                            dense
                            outlined
                            v-model="filter"
                            placeholder="Buscar"
                        >
                            <template v-slot:append>
                                <q-icon name="fas fa-search" />
                            </template>
                        </q-input>
                    </q-toolbar-title>
                    <q-btn
                        flat
                        dense
                        :icon="
                            `fas fa-sort-alpha-${
                                sortDir == 'asc' ? 'down' : 'down-alt'
                            }`
                        "
                        class="q-ml-sm"
                        @click="sort"
                    ></q-btn>
                </q-toolbar>
            </q-header>
            <q-page-container>
                <q-page class="bg-white">
                    
                </q-page>
            </q-page-container>
            <q-footer bordered class="bg-white">
                
            </q-footer>
        </q-layout>
    </q-dialog>
</template>

<script>

export default {
    name: "PageStockVehiclesFilter",

    data() {
        return {
            filter: "",
            filterLabel: null,
            filters: [],
            options: [],
            sortDir: "asc",
            checkAll: false
        };
    },

    computed: {
        filtered() {
            let data = []
            for(var i = 0; i<50; i++) {
                data.push({})
            }
            return data
        }
    },

    methods: {
        show() {
            this.$refs.dialog.show();
        },

        hide() {
            this.$refs.dialog.hide();
        },
        confirm() {
            this.close();
        },

        close() {
            this.hide();
        }
    }
};
</script>