CODEWITHSUNDEEP
vue.js
Tagamoga
Tagamoga

Reputation: 360

how to preselect a select template in Vue?

I am complete new to Vue. So sorry for "stupid" questions.

I have following select in my vue template:

<select style="width: 45px; height: 45px;padding-top: 5px;
                    padding-right: 5px; padding-bottom: 5px; padding-left: 5px;"
                    :value="cell"
                    @change="onChange($event)"
                    v-model="key">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>

{{cell}} is set correctly, but I cannot achive, that the select-template shows any preselected value. It is every time empty.

Thank you for help!

Upvotes: 0

Views: 73

Answers (1)

Terry
Terry

Reputation: 66218

Further expanding from my comment: the reason why pre-select does not work in your code is because your <option> elements do not have a value attribute. This means that there is no way the browser API (and by extension, VueJS) will know which <option> to pre-select, because all of them essentially have no value.

To avoid this issue, you will need to add value to each of your <option> element, e.g.:

<option value="0">0</option>

Upvotes: 2

Related Questions