select 標簽的渲染選項為空，但生成的選項數量與數據源計數相同 VUE / IONIC

Question

我想在 Ionic / Vue 中使用 v-for 指令呈現 select 標簽的選項。 看起來數據源與組件的通信良好，但 v-for 生成了一個空白選項。 鏈接在這里： 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>

這是導出部分：

data(){
  return{
    selecteds: '',
    options: [
      {name: 'Foo'},
      {name: 'Boo'},
      {name: '3rd'},
    ],
  }
  },

Answer 1

您的代碼中缺少一些單詞。 我已經進行了更改，output 與您描述的一樣。 您還使用 select 標簽中的 v-bind 作為 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>