javascript - 如何在 CRUD 执行后改进/保持分页

Question

我有一个 vue 组件，负责显示我的所有记录并可以编辑每条记录。我有 100 多条记录，因此我正在使用分页。

问题:例如，我想编辑位于分页第 3 页上的记录。我可以编辑记录，但更新后我的分页又从第 1 页开始。发生这种情况是因为我在更新后再次获取数据。

问题: 如何改进我的代码以防止这种情况发生？我真的需要再次获取数据来显示更改吗？

Vue组件

<template>
<div>
    <h2> Quest template </h2>
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <form class="form-inline mb-3">
                    <input class="form-control mr-sm-2" style='width:55%;' type="search" placeholder="Search"
                           aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a class="page-link" href="#"
                        @click="fetchQuests(pagination.prev_page_url)">Previous</a></li>
                        <li class="page-item"><a class="page-link disabled text-dark" href="#">Page {{pagination.current_page}} of {{pagination.last_page}}</a></li>
                        <li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a class="page-link" href="#"
                        @click="fetchQuests(pagination.next_page_url)"
                        >Next</a></li>
                    </ul>
                </nav>
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Price</th>
                        <th scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="quest in quests" v-bind:key="quest.id">
                        <th scope="row">{{quest.id}}</th>
                        <td>{{quest.name}}</td>
                        <td>No price set</td>
                        <td><a @click="editQuest(quest)" href="#" class=" btn btn-outline-dark"> Edit</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-4">
                <h2 class="text-center">EDIT PANEL</h2>
                <p class="text-center"> </p>
                <form @submit.prevent="updateQuest">
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                 <div class="input-group-text">Quest name</div>
                            </div>
                            <input  type="text" class="form-control" v-model="quest.name" placeholder="" :disabled="!this.edit">
                    </div>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                Quest price
                            </div>
                        </div>
                        <input type="text" class="form-control" v-model="quest.price" placeholder="" :disabled="!this.edit">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                M
                            </div>
                        </div>
                    </div>
                </div>
            <button v-bind:class="[{disabled: !this.edit}]" class="btn btn-outline-dark float-right"> Update</button>
            </form>
        </div>

        </div>
    </div>
</div>
</template>

Vue组件脚本

<script>
export default {
    data() {
        return {
            quests: [],
            quest: {
                id: '',
                name: '',
                price: '',   
            }, 
            quest_id: '',
            pagination: {},
            edit: false
        }
    },
    created() {
        this.fetchQuests();
    },
    methods: {
        fetchQuests(page_url) {
            let vm = this;
            page_url = page_url || '/api/quests'
            fetch(page_url, {
                headers : { 
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(res => {
                this.quests = res.data;
                vm.makePagination(res.meta, res.links);
            })
            .catch(error => console.log(error));
        },
        makePagination(meta,links) {
            let pagination = {
                current_page: meta.current_page,
                last_page: meta.last_page,
                next_page_url: links.next,
                prev_page_url: links.prev,
            }
            this.pagination = pagination;
        },
        updateQuest() {
            if(this.edit) {
                fetch( `/api/quests/${this.quest.id}`, {
                    method:'put',
                    body: JSON.stringify(this.quest),
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    this.quest.name = "";
                    this.quest.price = "";
                    this.fetchQuests();
                })
                .catch(error => console.log(error));
            } 
        },
        editQuest(quest) {
            this.edit = true;
            this.quest.id = quest.id;
            this.quest.quest_id = quest.id;
            this.quest.name = quest.name;
            this.quest.price = quest.price;
        }
    }
}
</script>

Answer 1

这个问题很模糊。如果你自己写了这个，那么你显然不是菜鸟，所以我会保持简单。为什么不重新加载当前页面呢？在数据变量中跟踪当前页面，当您进行更新时，而不是从头加载，而是重新加载当前页面 URL。

data: function() {
    current_page_url: '/api/quests
},
methods: {
    fetchQuests: function(page_url) {
        let vm = this;
        page_url = page_url || this.current_page_url;
        this.current_page_url = page_url;
        fetch(page_url, {
            headers : { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(res => {
            this.quests = res.data;
            vm.makePagination(res.meta, res.links);
        })
        .catch(error => console.log(error));
    }
}