'Loop on vuetify v-data-table pagination
I'm doing a project with Nuxtjs and Vuetify. The problem is in v-data-table, I'm trying to paginated the result, but the problem is that when data table load, it make a infinite loop and infinites calls to backend.
Here is the table
<v-data-table
:headers="headers"
:items="paginatedItems.items"
:server-items-length="paginatedItems.totalCount"
:options.sync="options"
item-key="id"
:loading="isLoading">
</v-data-table>
Here is the code
export default class OListProyect extends Vue {
options = {};
search = "";
headers = [
{ text: this.$t("OListProyect.table.headers.proyect"), value: "name" },
{ text: this.$t("OListProyect.table.headers.coin"), value: "symbol" },
{
text: this.$t("OListProyect.table.headers.events"),
value: "eventsCount",
},
{
text: this.$t("OListProyect.table.headers.nextEvent"),
value: "nextEvent",
},
{
text: this.$t("OListProyect.table.headers.nextEventDate"),
value: "nextEventDate",
},
];
page = 1;
paginatedItems: PaginatedListProyect<Proyect> = {} as PaginatedListProyect<Proyect>;
itemsPerPage = 5;
dialog = false;
@Watch("options", { deep: true})
onOptionsChanged(): void {
this.fetchItems();
}
async fetchItems() {
try {
const listProyectService = new ListProyectService();
this.paginatedItems = await listProyectService.GetAll(10, 1);
} catch (error) {
this.$nuxt.$emit("notification.error", this.$t("ErrorAlert.errorServer"));
}
}
After await listProyectService.GetAll() the watcher executes again and fetch items again, i dont know why, because options not change.
Thanks!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
