Framework 7 + Vue 3 智能 select 动态显示 select 选项

Question

I try without success to display the options of smart select. I recover the options with axios and I make a v-for to display the options but without success. I first put the function that allows me to retrieve the data in the computed hook without success then I put it in the mounted hook and I used the setvalue property of smart select without success too. Any help is welcome and I thank you in advance.

methods: {
 async getTokensLists() {
  const self = this;
  let url = f7.store.getters.getApiUrl.value + "tokens/";

  await self
    .axios({
      url,
      method: "get",
      withCredentials: false,
    })
    .then((response) => {
      if (response.satus == 200) {
        self.tokensList == response.data.data;
      }
    })
    .catch((error) => {
      console.log(error);
    });
 },
},
async created() {
 const self = this;
 // Error:  Uncaught Error: Smart Select requires initialized View
 self.getTokensLists();
},
computed: {
 /*case 1
 Error items readonly
 code: 
 items () {
 return this.tokensList
 }*/
},
mounted(){
 /*case 2
 Error: new data not display in front
 code:
 this.$nextTick(() => {
  this.$refs.item.f7SmartSelect.setValue(['test']);
 });*/
}

Here is the template part

 <f7-list-item
        title="Add tokens"
        smart-select
        :smart-select-params="{
          openIn: 'popup',
          searchbar: true,
          searchbarPlaceholder: 'Search token',
          pageTitle: 'Add tokens',
        }"
        @smartselect:closed="updateSelectedtokensData"
      >
        <select v-model="tokensList" name="select-token" multiple>
          <optgroup label="">
            <option
              v-for="(item, key) in tokensList"
              :key="key"
              :value="item.symbol"
            >
              {{ item.name + " (" + item.symbol + ")" }}
            </option>
          </optgroup>
        </select>
        <template #media>
          <f7-icon
            ios="f7:plus_circle"
            aurora="f7:plus_circle"
            md="material:add_circle_outline"
            size="30"
          ></f7-icon>
        </template>
    </f7-list-item>

Answer 1

To load the async data I used the setup method and the Suspense component of view 3

radar component

...
async setup(){
  const tokensList = ref(null)

  await axios({
    url: f7.store.getters.getApiUrl.value+"tokens/",
    method: "get",
    withCredentials: false,
  }).then(response =>{
    if (response.status == 200) {
      
      tokensList.value =  response.data.data;
    }
  }).catch(error =>{
    console.log(error)
  })
return {
  tokensList
};
}...

app.vue

<!-- Radar View -->

  <f7-view
    id="view-radar"
    :class="{ 'web-view': isDesktop }"
    name="Radar"
    tab
    :router="false"
  >
    <Suspense>
      <template #default>
        <radar></radar>
      </template>
      <template #fallback>
        <f7-page name="radar">
          <!-- Top Navbar -->
          <f7-navbar title="Radar">
            <f7-nav-right>
              <f7-link
                icon-ios="f7:funnel_fill"
                icon-aurora="f7:funnel_fill"
                icon-md="material:filter_alt"
                popup-open=".filter-popup"
              ></f7-link>
            </f7-nav-right>
          </f7-navbar>

          <f7-block class="text-align-center" style="margin-top: 20%;"
            ><f7-preloader color="multi" :size="42"></f7-preloader
          ></f7-block>
        </f7-page>
      </template>
    </Suspense>
  </f7-view>
  ...