从 axios promise 接收数据后的动态离子选择选项答案

【问题标题】：Dynamic ion-select-options after receiving data from axios promise从 axios promise 接收数据后的动态离子选择选项
【发布时间】：2021-10-05 13:30:54
【问题描述】：

我想知道是否有可能在 axios promise 返回选项数量后动态添加 ion-select-option 到 ion-select，例如如果 axios promise 返回 x=5 则向已创建的 ion-select 添加 5 个 oprions。

这是离子选择代码（有单个离子选择选项）：

<ion-item>
      <ion-label>Some label</ion-label>
      <ion-select class="some class" value="1" interface="popover">
        <ion-select-option value="1">1</ion-select-option>
      </ion-select>
</ion-item>

这是在按钮单击时触发的 axios 函数：

methods: {
    onClickFunction(){
       axios.post("http://some_php.php", formData)
        .then(res => {
            x = res.data[2]; // <-- this is number of options
            // here I want to add x * ion-select-option
   }
}

【问题讨论】：

标签： javascript vue.js ionic-framework axios

【解决方案1】：

如果有人想知道，我找到了解决方案。

<ion-item>
      <ion-label>Some label</ion-label>
      <ion-select placeholder="1" v-model="selectedOption" interface="popover">
        <ion-select-option v-for="(item, index) in tab" :key="index" 
           :value="item">{{item}}</ion-select-option>
      </ion-select>
</ion-item>

data() {
    return {
      tab: []
    },
created() {
    onClickFunction(){
       axios.post("http://some_php.php", formData)
        .then(res => {
            x = res.data[2]; 
            for (let i = 1; i <= res.data[2]; i++){
              this.tab.push(i);
            }
   }
}

这符合我的预期。

【讨论】：