我有一个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>
答案 0 :(得分：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));
}
}