@kimqar_ver

Как переделать v-model с select в ul li VUE JS?

Есть следующий код который фильтрует по ценнику от максимальной до минимальной
showedItems: function () {
                return this.items.slice(0, this.showedItemsCount).filter((item) => {
                    return (this.keyword.length === 0 || item.name.includes(this.keyword))
                }).sort((a, b) => {
                        if (this.sortBy == 'PriceMinMax') {
                            return (a.fullCost-b.fullCost);
                        }
                        else if (this.sortBy =='PriceMaxMin') {
                            return (b.fullCost-a.fullCost);
                        }
                    }
                )
            }

и вёрстка, которая фильтрует и работает исправно:
<select v-model="sortBy">
        <option value="PriceMinMax">
                   От мин. до макс.
        </option>

         <option value="PriceMaxMin">
                   ОТ макс. до мин.
         </option>
</select>

Как правильно переделать select в маркерованный список ul li чтобы работала фильтрация?
Пробовал так писать, не работает:
<ul v-model="sortBy">
                 <li value="PriceMinMax">Сначала дешевле</li>

                 <li  value="PriceMaxMin">Сначала дороже</li>
</ul>
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  sortOptions: [
    { value: 'PriceMinMax', text: 'сначала дешевле' },
    { value: 'PriceMaxMin', text: 'сначала дороже' },
  ],
  ...
}),

<ul>
  <li
    v-for="n in sortOptions"
    v-text="n.text"
    :class="{ active: sortBy === n.value }"
    @click="sortBy = n.value"
  ></li>
</ul>

li.active {
  color: red;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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