なぜvue.js 2で作業しない必要がありますか？</p> <p>マイVUEコンポーネントは、このようなものです下回っ

Question

あなたは私の場合を見ることができます：

<template> 
    <select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" > 
     <option>Choose</option> 
     <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option> 
    </select> 
</template> 
<script> 
    ... 
    export default { 
     ... 
     props: ['elementName', 'module'], 
     data() { 
      return { 
       selected: 'Choose' 
      }; 
     }, 
     ... 
    }; 
</script> 

結果はこのようなものです：私は何も選択しない

。私はボタンの提出をクリックし、必要な作業していない。

<option value="">Choose</option> 

それは働く：それは私がこのようにしてみてください必要

を表示しません。しかし、最初にアクセスしたときにオプションが表示されないようにする

この問題を解決するにはどうすればよいですか？

Answer 1

は、彼らの例を参照してください：https://vuejs.org/v2/guide/forms.html#Select

あなたが持っているので、それは何も表示されません：selected: 'Choose'しかし、あなたは=は「を選択し、」何のoptionで値を持っていません。 （値は空文字列です。「選択」はオプション要素の内部テキストです）。私は無効にしない "を選択し" たい

<template> 
    <select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" > 
     <option disabled value="">Choose</option> 
     <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option> 
    </select> 
</template> 
<script> 
    ... 
    export default { 
     ... 
     props: ['elementName', 'module'], 
     data() { 
      return { 
       selected: '' 
      }; 
     }, 
     ... 
    }; 
</script>