2016-07-15 3 views
1

数値の配列を含む配列変数のオプションをselectタグに設定したいとします。しかし、再現されている値は空白(Vue.js)データ内の数値の配列からoptionタグを使用してselectタグを設定するにはどうすればよいですか?

HTMLのようだ:

<select required id="dropDown"> 
    <option>Select here</option> 
    <option v-for="choice in choices">{{ choice }}</option> 
    </select> 

Javascriptを:

var vm = new Vue({ 
el: 'body',  
data:{ 
    'choices': [1,2,3,4,5] 
    } 
}); 

誰かが私のミスで私を指すことができますか?私はちょうど初心者なので、私はあなたから学びたいと思います。

答えて

0

elオプションは、マウントする既存のDOM要素をVueに提供する必要があります。 bodyのCSSセレクタを提供しているので、Vueはbody要素にマウントしようとします。

それ以外のコードは正しいです。ちょうどbodyタグであなたのHTMLをラップして動作します!

var vm = new Vue({ 
 
    el: 'body',  
 
    data:{ 
 
    'choices': [1,2,3,4,5] 
 
    } 
 
});
<!-- Load Vue JS --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> 
 

 
<!-- add body tags so `el: 'body'` resolves to an HTML element --> 
 
<body> 
 
    <select required id="dropDown"> 
 
    <option>Select here</option> 
 
    <option v-for="choice in choices">{{ choice }}</option> 
 
    </select> 
 
</body>

関連する問題