How to convert v-model with select to ul li VUE JS?

Question

Vue.js

There is the following code that filters by price tag from maximum to minimum

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

and layout that filters and works properly:

<select v-model="sortBy">
        <option value="PriceMinMax">
                   От мин. до макс.
        </option>

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

How to properly convert select into a bulleted list ul li so that filtering works?
I tried to write like this, it doesn't work:

<ul v-model="sortBy">
                 <li value="PriceMinMax">Сначала дешевле</li>

                 <li  value="PriceMaxMin">Сначала дороже</li>
</ul>

Answer 1

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