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

Question

我尝试显示 smart select 的选项但没有成功。我用 axios 恢复了选项，我做了一个 v-for 来显示选项但没有成功。我首先将允许我检索数据的函数放在计算钩子中但没有成功，然后我将它放在已安装的钩子中并且我使用了智能 select 的设置值属性也没有成功。欢迎任何帮助，我提前谢谢你。

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']);
 });*/
}

这是模板部分

 <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

为了加载异步数据，我使用了设置方法和视图 3 的 Suspense 组件

雷达组件

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

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

Framework 7 + Vue 3 smart select display dynamically select option

javascript

html-framework-7

vuejs3