简体   繁体   中英

Rendered options for select tag are blank BUT quantity of generated options is the same with data source count VUE / IONIC

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM