0

У меня есть 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)
                    })
            }
    }
2
  • Что хранится в response.data.content.content в методе restoreGiftsArchive: весь список или один измененный элемент?
    – user256824
    28 мая 2019 в 18:23
  • Весь список элементов
    – dmitriy
    28 мая 2019 в 18:25

1 ответ 1

1

Первое, что бросается в глаза, это неверно описан state:

state: {
 giftsArchive: state => {
            return state.giftsArchive;
        }
}

Должно быть:

state: {
 giftsArchive: []
}

Второе, мутации ничего не должны возвращать, это своего рода сеттеры. В мутации даже слово GET_ замените на SET_. Должно быть:

mutations: {
  SET_GIFTS_ARCHIVE_LIST(state, giftsArchive) {
    state.giftsArchive = giftsArchive;
  }
}
2
  • В документации смотрел, вроде в геттерах везде был return, но щас тогда поправлю может в этом проблема была
    – dmitriy
    28 мая 2019 в 18:17
  • Да вы правы нужно в action restoreGiftsArchive найти конкретный элемент и изменить его там а не весь список, не в ту степь меня почему то понесло
    – dmitriy
    28 мая 2019 в 19:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.