'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 |
---|