'Quasar Q-table not updating with ref() array

When I update ref() array, q-table not updating. I am initiating the rows ref with the "getApplications()" function. Then when i call the reviewed() function from a line in the q-table, the table does not update with new data after i update the rows ref.

<q-table
        v-model:selected="selected"
        :loading="loading"
        title="Applications"
        :rows="rows"
        :columns="columns"
        row-key="id"
      ></q-table>

<script setup>
import { api } from "boot/axios";
import { ref } from "vue";

const columns = ref([ ........});
let rows = ref([]);
getApplications();

function getApplications() {
  api({
    method: "get",
    url: "/webdata/_partition/apply/_design/apply-list/_view/apply-list",
  })
    .then((response) => {
      var row = fncArrayAll(response.data.rows);
      rows.value = row;
    })
    .catch((e) => {
      console.log("e: ", e);
      alert(e);
    })
    .finally(() => {
      loading.value = false;
    });
}
function reviewed(prop) {
  loading.value = true;
  api({
    method: "get",
    url: "/webdata/" + prop.row._id,
  })
    .then((response) => {
      var newData = response.data;
      newData.office.reviewed = !newData.office.reviewed;

      api({
        method: "put",
        url: "/webdata/" + prop.row._id,
        data: newData,
      })
        .then((response) => {
          console.log("new response: ", response);
        })
        .catch((e) => {
          console.log("e: ", e);
          alert(e);
        })
        .finally(() => {
          loading.value = false;
        });
    })
    .catch((e) => {
      console.log("e: ", e);
      alert(e);
    })
    .finally(() => {
      loading.value = false;
    });
}
function fncArrayAll(items) {
  var filtered = [];
  for (var i = 0; i < items.length; i++) {
    filtered.push(items[i].value);
  }
  // console.log(filtered);
  return filtered;
}
</script>

When rows is updated in the reviewed function, the q-table is not updated.

Thanks for any help



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source