Список Vue не "правильно" перерисовать после сортировки

Question

Логика сортировки ниже довольно проста:
1. Метки товаров, которые не содержат выбранное значение сортировки
2. Сортировать товары по количеству выбранных значений сортировки в порядке убывания
3. Скрыть товары, которые не содержат выбранное значение сортировки

Я добавил простую логику сортировки, и она помогает при сортировке элементов (можно ожидать в консоли)

Текущая проблема:
То, как список отображается на странице, на самом деле не отображает новый порядок, а изменяет порядок только для нескольких элементов.

Актуальный код в Codepen

Может кто-нибудь подсказать, что может быть более эффективным способом достижения функциональности, которая также будет правильно «переставлять» элементы на странице в соответствии с новым порядком сортировки.

P.S: Например, если вы выберете iron, будет видно, что вывод в консоли не соответствует порядку элементов списка, отображаемому на странице

Answer 1

Свойство products, которое вы повторяете в своем HTML-коде для отображения списка продуктов, не является наблюдаемым. Vue только отслеживает наблюдаемые свойства и рендерит каждый раз, когда изменяется какой-либо из наблюдаемых. Несмотря на то, что вы меняете порядок продуктов, Vue не знает об этом изменении, поскольку оно не наблюдается. Чтобы сделать свойство products наблюдаемым, добавьте его в свойство данных так же, как вы добавили питательные вещества, и инициализируйте его как пустой массив.

Сделайте ваше поле данных примерно таким:

data: {
  nutrients: nutrients,
  products: []
}

См. это для лучшего понимания работы системы реактивности Vue.