选择标签的渲染选项为空白，但生成的选项数量与数据源计数 VUE / IONIC 相同

Posted 2023-02-23

【中文标题】选择标签的渲染选项为空白，但生成的选项数量与数据源计数 VUE / IONIC 相同

【英文标题】：Rendered options for select tag are blank BUT quantity of generated options is the same with data source count VUE / IONIC

【发布时间】：2021-04-19 16:22:01

【问题描述】：

我想在 Ionic / Vue 中使用 v-for 指令呈现选择标签的选项。看起来数据源与组件有良好的通信，但是 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',
    ],
  
  ,

【参考方案1】：

您的代码中缺少一些单词。我已经进行了更改，输出如您所述。 您还可以在选择标签中使用 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>