Проблема с рендерингом после обновления словаря, Vue 3, Django, DRF
При попытке применить фильтры содержимое страницы не обновляется. Первый GET-запрос отправляется после перехода на localhost:8000/catalog/
После установки фильтров и отправки GET-запроса к API я получаю другой ответ, но DOM не обновляется
Это мой метод getCatalogs:
getCatalogs(page = 1) {
console.log("method getCatalogs called")
const PAGE_LIMIT = 20
const tags = this.topTags.filter(tag => !!tag.selected).map(tag => tag.id)
console.log("tags:", tags)
const min = document.querySelector('input[name=minPrice]').value
const max = document.querySelector('input[name=maxPrice]').value
console.log("min:", min, "max:", max)
if (parseFloat(min) !== 0) {
this.filter.minPrice = parseFloat(min);
}
if (parseFloat(max) !== 50000) {
this.filter.maxPrice = parseFloat(max);
}
this.updateUrlWithFilters()
this.getData("/api/catalog/", {
filter: {
...this.filter,
minPrice: parseFloat(min),
maxPrice: parseFloat(max)
},
currentPage: page,
category: this.category,
sort: this.selectedSort ? this.selectedSort.id : null,
sortType: this.selectedSort ? this.selectedSort.selected : null,
tags,
limit: PAGE_LIMIT
})
.then(data => {
console.log("response from API (data):", data);
// create new list for correct displaying of changes
this.catalogCards = [...data.results.items];
console.log("data.items:", data.results.items);
console.log("catalogCards:", this.catalogCards);
this.currentPage = data.currentPage;
this.lastPage = data.lastPage;
}).catch(error => {
console.warn('couldnt get the catalog');
console.log(error);
})
},
Я пытался использовать часы с принудительным обновлением, но ничего не вышло