如何在Vue.js的选择框中设置默认值？

Question

这可能是微不足道的，但我无法在Vue.js模板中创建一个选择框以将US默认显示（即在单击下拉菜单之前）

<select v-model="country">                                           
    <option selected="selected">US</option>
    <option>UK</option>
    <option>EU</option>
</select>

问题是选择器在我尝试单击之前都显示为空白。

我该如何解决？

Answer 1

请参见Form Input Bindings - Select。您只需要将绑定的v-model属性设置为适当的值即可。

这是一个例子...

new Vue({
  el: '#app',
  data: {
    country: 'US'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <select v-model="country">
    <!-- as recommended by Vue -->
    <option disabled value="">Please select one</option>
    <option>US</option>
    <option>UK</option>
    <option>EU</option>
  </select>
  
  <pre>Selected country: {{ country }}</pre>
</div>