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

Question

[kimqar_ver]

Есть следующий код который фильтрует по ценнику от максимальной до минимальной

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>

Answer 1

[0xD34F]

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;
}

Comments

[kimqar_ver]

Спасибо!