单击外部按钮时，选择Vue js选项

Question

单击外部按钮时，如果未选中，我想选择选择按钮的第一个选项。

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

Answer 1

您可以使用v-on:blur来调用v-on:blur上的方法，该方法将从数组中选择第一个选项。

<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将this.frequency设置为frequencies[0]的方法。

您可以在此page中看到使用v-on:blur。