CODEWITHSUNDEEP
javascriptjqueryvue.js
alexandra
alexandra

Reputation: 1192

Vue js select option in select on click of outside button

On click of outside button I would like to select the first option of a select button if unselected.

<select name="shareFrequency" class="default-input" v-model="frequency>
     <option value="">Select frequency</option>
    <option v-for="frequency in frequencies" :value="frequency"/>{{ frequency.label }}</option>
</select>

<button id="SelectButton" onclick="selectfirst(this)" type="button">Select frequency</button>

Upvotes: 0

Views: 1206

Answers (1)

Saurabh
Saurabh

Reputation: 73619

You can use v-on:blur for this, call a method on v-on:blur which will select the first option from the array.

<select name="shareFrequency" class="default-input" v-model="frequency" v-on:blur="selectFirst">
    <option value="">Select frequency</option>
    <option v-for="frequency in frequencies" :value="frequency"/>{{ frequency.label }}</option>
</select>

selectFirst will be the method which will set this.frequency to frequencies[0].

You can see the use of v-on:blur in this page.

Upvotes: 1

Related Questions