Question

我们的应用程序显示了Vuetify数据中的数千名用户。我们可以搜索和排序以查找用户。然后，我们可以点击用户名来打开他们的个人资料。

问题在于，当我们在浏览器中单击“返回”时，表中的搜索/排序/分页已经消失，我们必须重新开始。当我们试图快速查看大量用户时，这真的很烦人。

每次页面加载时，表格没有“重置”的正确方法是什么？

编辑：我们能够使用keep-alive来实现它。请参阅下面的App.vue代码...

我们的表格代码。 “名称”单元格具有指向用户个人资料页面的链接。

<v-data-table
    v-bind:headers="headers"
    :items="users"
    :search="search"
    :rows-per-page-items="[10,25]"
    >
    <template slot="items" slot-scope="props">
        <td>
            <img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img">
            <img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img">
        </td>
        <td>
            <router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.name }}</router-link>
            <router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id">{{ props.item.id }}</router-link>
        </td>
        <td>{{ props.item.validState | round | percentage }}</td>
        <td>{{ props.item.averageScore }}</td>



        <td>{{ props.item.standing }}</td>
        <td>{{ props.item.email }}</td>
        <td>{{ props.item.phone}}</td>
        <td>
            <span v-if="props.item.tipsUrl">Yes</span>
        </td>
        <td>{{ props.item.city }}</td>
    </template>
    <template slot="pageText" slot-scope="{ pageStart, pageStop }">
        From {{ pageStart }} to {{ pageStop }}
    </template>
</v-data-table>

App.vue keep-alive解决方案：

<template>
<v-app light>
<v-content>
  <transition name="router-anim">
    <keep-alive include="Event Reports,Users,Event Checkin,Event Jobs,Event Grades">
    <router-view/>
    </keep-alive>
  </transition>
</v-content>

从Vuetify数据表中单击时如何应用持久数据？

0 个答案: