vueコンポーネントのドロップダウンで選択した値を取得するにはどうすればよいですか？

Question

マイVUEコンポーネントは、あなたが

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.

は、私はそれをどのように解決することができ、エラーが存在し一気で

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

の下にこれを見ることができますか？

Answer 1

あなたはこの

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