如何在axios请求返回后为ion-select动态添加ion-select-option

实现方案 #

完全可以实现，更推荐配合你当前用的Vue框架的响应式列表渲染逻辑实现，比手动操作DOM更稳定，不会出现Ionic组件渲染异常的问题，完整修改如下：

1. 调整模板部分

把原本写死的ion-select-option改成用v-for动态渲染绑定数组：

<ion-item>
      <ion-label>Some label</ion-label>
      <ion-select class="some class" value="1" interface="popover">
        <ion-select-option 
          v-for="(option, index) in selectOptions" 
          :key="index" 
          :value="option.value"
        >
          {{ option.label }}
        </ion-select-option>
      </ion-select>
</ion-item>

2. 新增响应式数组变量

在组件的data配置中添加选项存储数组，初始值保留你原来的默认选项：

data() {
  return {
    selectOptions: [
      { value: '1', label: '1' }
    ]
  }
}

3. 修改axios回调逻辑

拿到返回的数量后，往数组中添加对应数量的选项即可：

methods: {
    onClickFunction(){
       axios.post("http://some_php.php", formData)
        .then(res => {
            const x = res.data[2]; // 接口返回的选项数量
            // 若需要每次请求都重置所有选项，可先加一行 this.selectOptions = [] 清空数组
            // 示例为从2开始追加x个选项，你可根据需求修改选项的value和显示文本
            for(let i = 2; i <= x + 1; i++) {
              this.selectOptions.push({
                value: String(i),
                label: String(i)
              })
            }
       })
    }
}

（可选）不推荐的原生DOM操作方案，仅做参考：
如果你不想修改现有模板结构，也可以直接操作DOM添加选项，但容易触发Ionic组件的渲染异常，不建议生产环境使用：

.then(res => {
  const x = res.data[2]
  const selectDom = document.querySelector('.some.class')
  for(let i = 2; i <= x +1; i++) {
    const opt = document.createElement('ion-select-option')
    opt.value = String(i)
    opt.innerText = String(i)
    selectDom.appendChild(opt)
  }
})

内容的提问来源于stack exchange，提问作者Frogg1ven