Vue.js problem z select po dodaniu v-model

Question

Witam,

kiedy w Vue.js mam select

<select name="category">
<option>Wybierz kategorię</option>
<option>Sport</option>
</select>

wszystko jest jak najbardziej ok, kiedy jednak dodam do niej v-model

<select name="category" v-model="items.category">
<option>Wybierz kategorię</option>
<option>Sport</option>
</select>

z czegoś takiego 

robi się coś takiego

lista, w sensie opcję wyświetlają się normalnie znika jednak pierwszy option który wyświetla się w selekcie domyślnie. Jest w liście rozwijanej ale nie jest domyślnie wybrany

Answer 1

Brakuje value przy <option> oraz selected przy domyślnym <option>

Comments

<select name="category" v-model="items.category">
<option selected>Wybierz kategorię</option>
<option>Sport</option>
</select>

//czyli tak to powinno wyglądać?

 

---

A gdzie value przy każdym option?

---

A czy jest to konieczne? Przecież dane z każdego option i tak zostaną pobrane. Ale niezależnie od tego czy są value i selected po dodaniu v-model select i tak domyślnie jest pusty

Answer 2

Powinieneś mieć coś w tym stylu:

<select name="category" v-model="items.category">
            <option value="">Wybierz kategorię</option>
            <option>Sport</option>
          </select>
//--------------------------

data() {
  return {
    items: {category: '' },
  }
}