Render data from API: select with optgroup

[josejachuf]

Given the following within x-data

optgroup: [
  {
    "app": {
      "data": {        
        "id": "1",
        "name": "App-1"       
      },
      "groups": [
        {
          "id": "1",
          "name": "g100"          
        },
        {          
          "id": "2",
          "name": "g200"         
        },
        {          
          "id": "3",
          "name": "g300"         
        }
      ]
    }
  },
  {
    "app": {
      "data": {        
        "id": "2",
        "name": "App-2"        
      },
      "groups": [
        {          
          "id": "4",
          "name": "g400"          
        },
        {          
          "id": "5",
          "name": "g500"          
        }
      ]
    }
  }  
]

I can do this and it works fine:

<div class="input-field">
   <select multiple>
     <template x-for="item in optgroup">
       <optgroup :label="item.app.data.name" :key="item.app.data.id">
         <template x-for="rol in item.app.groups" :key="rol.id">
           <option :value="rol.id" x-text="rol.name"></option>
         </template>
       </optgroup>
     </template>
   </select>
   <label>Groups</label>
 </div>

Now, if optgroup I get it from an API-rest, this does not work

     const resp = await axios.get(urlApp)
      try {
        this.optgroup2 = resp.data.data;
      }
      catch(err) {
        console.log(err.message);
      }

I can validate that the two arrays are equal, the hardcode and the one obtained from the API

get isEqual() {
  return JSON.stringify(this.optgroup) === JSON.stringify(this.optgroup2);      
}

But I get the empty select

I tried to use an x-if assuming that at the time it is rendered, the data has not yet been obtained from the API, but it did not work

<template x-if="optgroup2.length > 0">
 <div class="input-field">
   <select multiple>
     <template x-for="item in optgroup">
       <optgroup :label="item.app.data.name" :key="item.app.data.id">
         <template x-for="rol in item.app.groups" :key="rol.id">
           <option :value="rol.id" x-text="rol.name"></option>
         </template>
       </optgroup>
     </template>
   </select>
   <label>Groups</label>
 </div>
</template>

I understand that this is why I am using it badly.

In short, if I use the hardcoded array works, if I use the array from the API, no. And I don't know how to solve it

Jose

[josejachuf]

If in the select to the x-for I do it with optgroup2 it works fine, but with pptgroup (API) no, it is as if at that time the data was not yet available.

[josejachuf]

There is more than I can't understand in behavior:

Given:

    get isDataOk() {
      return this.optgroup.length > 0
    },

and

 <template x-if="isDataOk">
    <div class="input-field">
      <select multiple>
        <template x-for="item in optgroup">
          <optgroup :label="item.app.data.name" :key="item.app.data.id">
            <template x-for="rol in item.app.groups" :key="rol.id">
              <option :value="rol.id" x-text="rol.name"></option>
            </template>
          </optgroup>
        </template>
      </select>
      <label>Groups</label>
    </div>
  </template>

If I do:

<template x-if="false">

Does what I hope, hides the select.

In the same way, if I do:

<template x-if="true">

Show the select, although it does not work, but it shows it empty.

So far is the expected behavior, but if I do:

<template x-if="isDataOk">

when isDataOK is true only shows the label:

<label>Groups</label>