У меня есть 2 списка: первый активные карты а второй архивные. Когда я удаляю карточку с архивов она должна появиться в активных.
Проблема с моим кодом в том что после restore оно убирает архивную карточку но мне нужно сделать refresh страницы чтобы увидеть что её больше нет в архивном листе, на этой же странице у меня есть поиск по этому списку там у меня в консоли появляется сразу ошибка
Error in render: "TypeError: Cannot read property 'filter' of undefined"
Буду признателен за помощь если подскажите как правильно сделать. Наверно лист не обновляеться так как в методе restoreGiftArchive возможно ещё как то нужно вызвать this.$store.dispatch('getGiftsArchiveList') чтобы пришёл обновлёный список?
Archive.vue
<template>
<div class="tabs__view">
<div v-if="$store.getters.checkPermission( { method: 'coupon', permission: 'read' } )">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search..." v-model="search">
</div>
<Table :headers="tableHeader" :items="giftsArchiveList">
<template v-slot:items="{row}">
<tr>
<td>
<td>{{row.title}}</td>
<td>{{row.description}}</td>
<td>
<button @click="restoreGiftArchive(row)">Restore</button>
</td>
</tr>
</template>
</Table>
</div>
</div>
</template>
<script>
import Table from '../../general/Table';
export default {
components: {Table},
data() {
return {
search: ''
}
},
mounted() {
this.$store.dispatch('getGiftsArchiveList');
},
computed: {
giftsArchiveList() {
return this.$store.getters.giftsArchive
.filter((elem) => {
return elem.title.toLowerCase().match(this.search.toLowerCase())
|| elem.description.toLowerCase().match(this.search.toLowerCase());
})
}
},
methods: {
restoreGiftArchive(item) {
this.$store.dispatch('restoreGiftsArchive', item);
}
}
}
</script>
Table.vue
<template>
<div class="bltable__wrapper">
<table class="bltable">
<thead class="bltable__thead">
<tr v-if="headers.length">
<th v-for="(item, index) in headers" :key="index">{{item.name !== '' ? $t(`global.tableHeaders['${ item.name }']`) : ''}}</th>
</tr>
</thead>
<tbody class="bltable__body">
<slot name="items" v-for="item in items" :row="item"></slot>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
headers: {},
items: {}
}
}
</script>
Store.js
state: {
giftsArchive: [],
},
getters: {
giftsArchive: state => {
return state.giftsArchive;
}
},
mutations: {
GET_GIFTS_ARCHIVE_LIST(state, giftsArchive) {
return state.giftsArchive = giftsArchive;
},
REMOVE_GIFTS_ARCHIVE_CARD(state, giftArchiveCard) {
},
},
actions: {
getGiftsArchiveList({state, commit}) {
axios.post(`${state.apiVersion}/gift/list/`, {
user: { id: state.userData.id }, status: false
}, state.contentType)
.then(response => {
commit('GET_GIFTS_ARCHIVE_LIST', response.data.content.content)
})
.catch(error => {
console.log(error);
})
},
restoreGiftsArchive({state, commit}, item) {
let formData = new FormData();
let data = {
status: true,
};
formData.append('gift', JSON.stringify(data));
axios.post(`${state.apiVersion}/gift/save/`,
formData,
{headers: {'Content-Type': 'multipart/form-data'}})
.then(response => {
commit('REMOVE_GIFTS_ARCHIVE_CARD', item.id);
})
.catch(error => {
console.log(error)
})
}
}
response.data.content.content
в методеrestoreGiftsArchive
: весь список или один измененный элемент?