Filters doesn't work with api req

[javigarcmart]

Hi! I've a table showing diferents values and it does but when I try to filter, it doest work.

Thats my q-grid at template:

<q-grid
      :data="rows"
      :columns="columns"
      :columns_filter="true"
      :draggable="true"
      selection="multiple"
      :selected="selected"
      row_key="name"
      @selected-val="GetSelected($event)"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td>
            <q-checkbox
              color="primary"
              v-model="selected"
              :val="props.row"
              @update:model-value="sendToSelected(props.row.id)"
            />
          </q-td>
          <q-td key="id">
            {{ props.row.id }}
          </q-td>
          <q-td key="owner">
            {{ props.row.owner }}
          </q-td>
          <q-td key="lotNumber">
            {{ props.row.lotNumber }}
          </q-td>
          <q-td key="productId">
            {{ props.row.productId }}
          </q-td>
          <q-td>
            <q-btn
              icon="message"
              flat
              color="accent"
              @click="dataAndShow(props.row)"
            />
          </q-td>
        </q-tr>
      </template>
    </q-grid>

The columns and rows in setup():

    const columns = [
      {
        name: "id",
        required: true,
        label: "idHeader",
        field: (row) => row.id,
        align: "center",
        sortable: true,
      },
      {
        name: "owner",
        required: true,
        label: "owner",
        align: "center",
        field: (row) => row.owner,
        format: (val) => `${val}`,
        sortable: true,
      },
      {
        name: "lotNumber",
        required: true,
        label: "lotNumber",
        align: "center",
        field: (row) => row.lotNumber,
        format: (val) => `${val}`,
        sortable: true,
      },
      {
        name: "productId",
        required: true,
        label: "productId",
        align: "center",
        field: (row) => row.productId,
        format: (val) => `${val}`,
        sortable: true,
      },
    ];
    const rows = ref([]);

and the api request only push the differents values into array:

 rows.value.push({
              id: element.attrs[0].value
                .toString()
                .substr(0, element.attrs[0].value.indexOf("#")),
              owner: element.attrs[1].value.toString(),
              lotNumber: element.attrs[2].value.toString(),
              productId: element.attrs[3].value.toString(),
              sellable: element.attrs[4].value.toString(),
              claimed: element.attrs[5].value.toString(),
            });

I'venn trying diferents methods, and i thought that probably was the lifecycle of vue3, then i tryed to fetch the api at setup(), and also on a onMounted() method, but it doesn't work?

[pratik227]

Hi @javigarcmart ,

QGrid doesn't support this

        field: (row) => row.productId,

Convert this to

field: "productId",

https://stackblitz.com/edit/quasarframework-a69yar?file=src%2FApp.vue

[pratik227]

Closing this issue.