VueJS Reactive Array с фильтрами

Question

VueJS Reactive Array с фильтрами

1

У меня есть список уведомлений с двумя фильтрами (Показать все, Показать непрочитанные). Я загружаю все уведомления при создании компонента, а затем вызываю фильтр Show All.

created() {
   axios.get('user/notifications').then(response => {
       this.notifications = response.data;
       this.showAll();
   }).catch(e => {
       console.log(e);
   });
 },

Здесь показаны Показать все и Показать непрочитанные методы:

showAll() {
     this.filteredNotifications = this.notifications;
},
showUnread() {
    this.filteredNotifications = _.filter(this.notifications, notif => {
          return notif.read_at === null;
    });
},

Я повторяю массив следующим образом:

<li v-for="notif in filteredNotifications">
    <span @click="toggleNotification(notif)"></span>
</li>

И здесь я переписываю уведомление:

toggleNotification(notification) {
    axios.put('user/notification/' + notification.id + '/toggle', {_method: 'PUT'}).then(response => {
         notification.read_at = notification.read_at == null ? true : null;
    }).catch(e => {
         console.log(e);
    });
}

Я пытаюсь сделать это, когда я попадал в фильтр Show Unread, когда я переключаю уведомление, он будет удален из этого фильтра. Его нельзя удалить из исходного массива, потому что, когда я нажимаю "Показать все", я должен видеть все уведомления.

В настоящий момент, когда я вхожу в Непрочитанный фильтр, если я переключаю уведомление, он изменяет уведомление read_at на true, но не удаляет его из списка. Только когда я снова нажимаю фильтр, он обновляется.

Я мог бы легко решить это, поместив флаг в каждый фильтр, а затем в toggleNotification я смог проверить, какой флаг активен, и вызвать его метод вручную, но это слишком грязно для меня. Любая помощь?

Adam Silva 24 окт. 2018, в 11:35

Источник

0

Я думаю, что причина в том, что метод showUnread не будет срабатывать при изменении данных внутри FilterNotifications. Вы можете попробовать применить метод showUnread к computed. В Vuejs вычисленные автоматически вычисляются при изменении зависимых данных.
鄭元傑 24 окт. 2018, в 09:17

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Я думаю, что причина в том, что метод showUnread не будет срабатывать при изменении данных внутри FilterNotifications. Вы можете попробовать применить метод showUnread к computed. В Vuejs вычисленные автоматически вычисляются при изменении зависимых данных.

WebMan · Answer 1 · 2018-10-24T09-09-00.000Z

Ваши методы выглядят нормально. Но если вы хотите, чтобы метка уведомления была прочитана, а затем отправьте запрос на базовую базу данных, чтобы установить read_at = currentDate. Когда запрос завершился успешно, просто исключите уведомление чтения по его индексу из этого массива.filteredNotifications и Vue будет рендер на основе нового массива.

<li v-for="(notif, index) in filteredNotifications">
    <span @click="toggleNotification(notif, index)"></span>
</li>

Затем в вашем методе:

toggleNotification(notification, index) {
    axios.put('user/notification/' + notification.id + '/toggle', {_method: 'PUT'}).then(response => {
       notification.read_at = notification.read_at == null ? true : null;
       this.filteredNotifications.splice(index, 1)
    }).catch(e => {
       console.log(e);
});

Если вы хотите повторно отобразить на основе ответа, тогда в ответ отправьте все непрочитанные уведомления и установите this.filteredNotifications = response.