I want render an options for select tag using v-for directive in Ionic / Vue. It looks like a data source have a good communication with component, but v-for is genering a blank options. Link is here: https://ibb.co/Vjv0dfb
<div style="text-align: center; margin-top:30px; ">
<select id="secondParamSelect" style="width:300px; margin-left:50px;">
<option v-bind:="selecteds" v-for="option in options" :key="option.name" style="color:black;"></option>
</select>
<ion-label >{{selecteds}}</ion-label>
</div>
Here is an export part:
data(){
return{
selecteds: '',
options: [
{name: 'Foo'},
{name: 'Boo'},
{name: '3rd'},
],
}
},
There were some word missing in your code. i have made the changes and the output is as described by you. Also u have use v-bind in select tag as a v-model...
<div style="text-align: center; margin-top:30px; ">
<select style="width: 300px; margin-left: 50px" v-model="selecteds">
<option
v-for="option in options"
:key="option.name"
style="color: black"
>
<!-- Changes -->
{{ option.name }}
</option>
</select>
<ion-label >{{selecteds}}</ion-label>
</div>