I am currently experiencing an issue with a filter operation that is causing my array to return empty after deletion. The values seem to be evaluated correctly, but for some reason the allSheep reference is being reassigned to an empty array once the operation is complete. I am perplexed as to why this behavior is occurring. Here is the code snippet from my setup function:
setup() {
const allSheep = ref([]);
const formOpen = ref(false);
const searchQuery = ref("");
const searchTag = ref("tag_id");
const axios = inject("axios");
axios
.post(GRAPHQL_API_URL, {
query: print(ALL_SHEEP),
})
.then((response) => {
allSheep.value = response.data.data.get_all_sheep;
})
.catch((err) => console.log(err));
const filteredSheep = computed(function () {
const query = searchQuery.value.toLowerCase();
return searchTag.value === "breed"
? allSheep.value.filter((el) => el.breed.breed_name.includes(query))
: allSheep.value.filter((el) =>
el[searchTag.value].toLowerCase().includes(query)
);
});
function getSearchQuery(query) {
searchQuery.value = query;
}
function setTag(key) {
searchTag.value = key === "tag" ? (key = "tag_id") : key;
searchQuery.value = "";
}
function handleOpenForm() {
formOpen.value = true;
}
function updateData(data) {
allSheep.value = [...allSheep.value, data];
}
function deleteSheep(id) {
allSheep.value = allSheep.value.filter((el) => {
el.sheep_id !== id;
});
}
return {
allSheep: filteredSheep,
getSearchQuery,
setTag,
handleOpenForm,
updateData,
formOpen,
searchQuery,
searchTag,
deleteSheep,
};
},
};
</script>