如何在vue組件上的下拉列表中選擇值？

Question

我VUE組件，你可以看到這下面

<template> 
    <div> 
     ... 
     <select class="form-control" v-model="selected" @change="myFunction()"> 
      <option selected disabled>Status</option> 
      <option v-for="status in orderStatus" v-bind:value="status.id">{{ status.name }}</option> 
     </select> 
     ... 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
      return{ 
       selected: '' 
      } 
     }, 
     methods: { 
      myFunction: function() { 
       console.log(this.selected) 
      } 
     } 
    } 
</script> 

在吞氣存在錯誤

Vue template syntax error:

: inline selected attributes on will be ignored when using v-model. Declare initial values in the component's data option instead.

我該如何解決呢？

Answer 1

你可以將這個

<option disabled value="">Status</option> 

而是這個

<option selected disabled>Status</option> 

https://vuejs.org/v2/guide/forms.html#Select

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.