@kirill-93

Почему сортировка массива «вешает» страницу во Vue?

Подскажите, пожалуйста, в чем может быть проблема вот такого кода:
<div v-for="event in sortedEvents">

</div>

<script>
...
computed: {
    sortedEvents() {
            return this.events.sort((e1, e2) => {
                return e1.order - e2.order;
            });
    }
}
...
</script>


Страница зависает от такого кода. events - это массив из 5 элементов, свойство order у всех корректное.

UPD:
events - это массив, который загружается в родителе и передается через props. Если заглушку этого массива добавить в data, то все работает.

UPD2:
Если sortedEvents вынести в data и заполнять в created, то все работает.

UPD3:
Если sortedEvents в computed заменить на вот такой код, то все работает тоже

computed: {
            sortedEvents() {
                let array = JSON.parse(JSON.stringify(this.events));

                array.sort((e1, e2) => {
                    return e1.order - e2.order;
                });

                return array;
            },
}

То есть проблема как-то связана с изменениями this.events
  • Вопрос задан
  • 772 просмотра
Пригласить эксперта
Ответы на вопрос 3
@Severn101
Здесь бесконечный цикл получается.
Метод sort изменяет массив events. Vue видит изменения и повторно запускает вычисление sortedEvents.
Вам уже правильно посоветовали, используйте watch, либо делайте копию массива events в computed и сортируйте уже его.
Ответ написан
@bagzon
Backend PHP, NodeJs, JS
Тебе надо повесить watch на events, и по срабатыванию выполнять метод сортировки массива, а тут походу из-за кучу обсерверов он и лагает.

Плюс скорее всего ошибка должна быть, т.к функция sort изменяет сортируемый массив, а т.к пропсы родительские this.events нельзя менять в дочерних, то и ошибка будет.
Ответ написан
Комментировать
@Redrik_Shuhart
Выше уже отметили, что у вас бесконечный цикл.
Замените
let array = JSON.parse(JSON.stringify(this.events));

на
let array = [...JSON.parse(JSON.stringify(this.events))]
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы