Datatable ajax filter infinate loop

[BITSOLVER]

Hi,

I'm trying to use the Prime Vue Datatable with a DJango API backend, whilst I have got data coming back and populating the table I end up with an infinite loop when trying to enter a filter term, global / column level. My service looks like this:

Code: Select all

import axios from "axios";

axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.xsrfCookieName = 'csrftoken';

export default class TenantService {

    getData(data) {
        return axios.post(
            '/public/api-tenants/',
            data
        ).then(res => res.data);
    }
}

And my Vue looks like this:

Code: Select all

<template>
  <div class="about">
    <h1>Tenants:</h1>
    <DataTable class="p-datatable-striped" :value="domains" :paginator="true" :rows="rows" :first="page"
               :totalRecords="total_records"
               :lazy="false" :rowsPerPageOptions="[1,10,50]" :loading="loading"
               @page="onPage($event)"
               @sort="onPage($event)"
               @filter="onFilter($event)"

               :filters="filters"
    >
      <template #header>
        <div class="table-header">
          List of Tenants:
          <span class="p-input-icon-left">
            <i class="pi pi-search"/>
            <InputText type="text" v-model="filters['global']" placeholder="Global Search"/>
          </span>
        </div>
      </template>
      <template #empty>
        No tenants found.
      </template>
      <template #loading>
        Loading tenants data. Please wait.
      </template>
      <Column field="domain" header="Domain" sortable="false" filterField="domain" filterMatchMode="contains">
        <template #body="slotProps">
          {{ slotProps.data.domain }}
        </template>
        <template #filter>
          <InputText type="text" v-model="filters['domain']" class="p-column-filter" placeholder="Search by domain"/>
        </template>
      </Column>
      <Column field="tenant__name" header="Name" sortable="false" filterField="tenant__name" filterMatchMode="contains">
        <template #body="slotProps">
          {{ slotProps.data.tenant__name }}
        </template>
        <template #filter>
          <InputText type="text" v-model="filters['tenant__name']" class="p-column-filter" placeholder="Search by name"/>
        </template>
      </Column>
    </DataTable>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import DataTable from "primevue/components/datatable/DataTable";
import Column from "primevue/components/column/Column";
import InputText from "primevue/components/inputtext/InputText";
import TenantService from "@/views/manager/TenantService";

export default {
  name: "Tenants",
  data() {

    return {
      domains: null,
      rows: 10,
      page: 0,
      loading: true,
      total_records: 0,
      sortField: null,
      sortOrder: 0,
      filters: {},
      filteredValue: null
    }
  },
  service: null,
  created() {
    this.service = new TenantService();
  },
  mounted() {
    if (Cookies.get('sessionid') === undefined) {
      this.$router.replace({name: "Login"});
    }
    this.service.getData({
      rows: this.rows,
      page: this.page
    }).then(data => {
        this.domains = data.data;
        this.total_records = data.total_records;
        this.pages = data.pages;
        console.log(data);
        return data;
      });
    this.loading = false;

  },
  methods: {

    onPage(event) {
      console.log("onPage");
      console.log(event);
      this.page = event["page"];
      this.rows = event["rows"];
      this.service.getData({
        rows: this.rows,
        page: this.page
      }).then(data => {
        this.domains = data.data;
        this.total_records = data.total_records;
        this.pages = data.pages;
        console.log(data);
        return data;
      });
    },
    onFilter(event) {
      console.log("On filter");
      console.log(event);
      this.service.getData({
        rows: this.rows,
        page: this.page,
        filters: {
          key: "global",
          value: event.filters.global
        }
      }).then(data => {
        this.domains = data.data;
        this.total_records = data.total_records;
        this.pages = data.pages;
        console.log(data);
        return data;
      });
    }
  },
  components: {
    "DataTable": DataTable,
    "Column": Column,
    "InputText": InputText
  }
}
</script>

<style scoped>

</style>

Data recieved by server:
Request: {'rows': 10, 'page': 0, 'filters': {'key': 'global', 'value': 't'}}

Data sent back to Vue:
Response: {'data': [{'domain': 'system.localhost', 'tenant__name': 'Manager Site'}, {'domain': 'tenant1.localhost', 'tenant__name': 'tenant11'}], 'pages': 0, 'total_records': 2}

Am I missing something obvious as the request just keeps being sent in an loop?

Many thanks,
Steve