时间戳

首页 > 解决方案 > 刷新页面时保持在数据表中输入的搜索值vue.js

laravel - 刷新页面时保持在数据表中输入的搜索值vue.js

问题描述

刷新后如何保持页面中过滤的值。在此处输入图像描述当我路由回此视图时，使用最后选择的值填充过滤的项目。

<vk-datatable
            :columns="columns"
            :rows="filteredProducts"
            :per_page="8"
            :actions="actions"
            v-on:row_click="rowClick"
            v-on:row_delete="rowDelete"
            v-on:row_edit="rowClick"
            v-if="filteredProducts"
            :loadingPropData="$apollo.queries.products.loading"
        ></vk-datatable>

标签： laravelvue.jsdatatablefiltering

解决方案

如果您定期重新加载页面，那么您只需要在输入上使用模型并将输入的值保存到本地存储（例如）。在页面加载时，将本地存储中的值插入到 create 挂钩中的每个模型中。 https://vuejs.org/v2/guide/forms.html（对于选择输入相同）

<template>
    <div>
        ...
        <input v-model="userName"
               @input.trim="handleInput('userName', $event)"/>
        ...
    </div>
</template>

<script>
    export default {
        name: 'ComponentName',
        data: () => ({
            userName: null
        }),
        methods: {
            handleInput(key, {target}) {
                const storageData = {[key]: target.value};

                localStorage.setItem('storageKey', JSON.stringify(storageData));
            },

            /* with debounce */
            handleInput2: _.debounce(function (key, {target}) {
                const storageData = {[key]: target.value};

                localStorage.setItem('storageKey', JSON.stringify(storageData));
            }, 500),
        },
        created() {
            this.userName = (JSON.parse(localStorage.getItem('storageKey')) || {}).userName; // value or null
        }
    }
</script>

推荐阅读