While using pagination, I encountered an issue where the nextPage
method works fine but the previousPage
method throws an error.
The error message warns against directly mutating a prop as it gets overwritten whenever the parent component re-renders. It suggests using a data or computed property based on the prop's value instead. In this case, the prop being mutated is "page".
The problem seems to be related to the previousPage
method where the attempt to directly modify the page
results in an error. How can this issue be resolved?
<div>
<span
@click="previousPage"
>
</span>
<span
@click="nextPage"
>
</span>
</div>
<script>
export default {
props: [
"results",
"is_loading",
"search",
"page",
"previous",
"next",
"pages_results"
],
methods: {
nextPage: function() {
if (this.pages_results[this.page + 1]) {
this.pages_results[this.page + 1].array;
this.pages_results[this.page + 1].next;
this.pages_results[this.page + 1].previous;
this.page++;
} else {
this.next && this.search(this.page + 1);
}
},
previousPage: function() {
if (this.pages_results[this.page - 1]) {
this.pages_results[this.page - 1].array;
this.pages_results[this.page - 1].next;
this.pages_results[this.page - 1].previous;
this.page--;
} else {
this.previous && this.search(this.page - 1);
}
},
load() {
this.search(this.page + 3);
}
},
data() {
return {};
}
};
</script>