'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