I have a Vue component that displays all my records and allows me to edit each one. With over 100 records, I am implementing pagination for efficient navigation.
Issue: For instance, when I try to edit a record on page 3 of the pagination, after updating the record, the pagination resets to page 1. This occurs because I fetch the data again post-update.
Question: How can I enhance my code to prevent this reset? Is it necessary to re-fetch the data to reflect the changes?
Vue Component
<template>
<div>
<h2> Quest template </h2>
...
</form>
</div>
</div>
</div>
</template>
Vue Component Script
<script>
export default {
data() {
return {
quests: [],
quest: {
id: '',
name: '',
price: '',
},
quest_id: '',
pagination: {},
edit: false
}
},
created() {
this.fetchQuests();
},
methods: {
fetchQuests(page_url) {
...
},
makePagination(meta,links) {
...
},
updateQuest() {
if(this.edit) {
...
}
},
editQuest(quest) {
...
}
}
}
</script>