Dynamic ion-select-options after receiving data from axios promise-CodePudding

I wonder if there is possibility to dynamically add ion-select-option to ion-select after axios promise returns number of options, for example if axios promise returns x=5 then add 5 oprions to already created ion-select.

Here is ion-select code (there is single ion-select-option):

<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>

Here is axios function which is triggered on button click:

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
   }
}

CodePudding user response：

If anybody wonder, I found solution.

<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);
            }
   }
}

This works as I expected.