Framework7 + Vue3 Smart Select 动态渲染下拉选项失败问题求助

核心问题排查 #

你遇到的问题主要是4个代码错误+Framework7 Smart Select特性不熟悉导致的：

• 接口请求成功后赋值tokensList用了双等号==，实际根本没有完成赋值
• select的v-model绑定错误，直接绑定到了选项数据源tokensList，而v-model实际是存储用户选中值的，选中操作会直接覆盖你的选项数据源
• Framework7 Smart Select初始化时会缓存原生select的option，后续你通过v-for动态更新option后，Smart Select不会自动同步，需要手动调用update方法刷新
• created阶段Framework7的View实例还未初始化完成，此时操作Smart Select会触发依赖报错

修复步骤 #

1. 修正数据变量定义 #

在组件data中新增两个变量，拆分选项数据源和选中值：

data() {
  return {
    tokensList: [], // 存储所有下拉选项数据源
    selectedTokens: [] // 存储用户选中的token，绑定到select的v-model
  }
}

2. 修复接口请求的赋值错误 #

methods: {
 async getTokensLists() {
  let url = f7.store.getters.getApiUrl.value + "tokens/";
  try {
    const response = await this.axios({
      url,
      method: "get",
      withCredentials: false,
    });
    if (response.status == 200) {
      // 修正为单等号赋值
      this.tokensList = response.data.data;
      // 等待DOM渲染完成后，手动刷新Smart Select的选项缓存
      this.$nextTick(() => {
        this.$refs.tokenSmartSelect.f7SmartSelect.update();
      })
    }
  } catch (error) {
    console.log(error);
  }
 },
},

3. 调整接口调用时机 #

不要在created里调用接口，改到mounted阶段执行：

mounted(){
  this.getTokensLists();
}

4. 修正模板绑定 #

给f7-list-item加ref，修正select的v-model绑定：

<f7-list-item
        ref="tokenSmartSelect"
        title="Add tokens"
        smart-select
        :smart-select-params="{
          openIn: 'popup',
          searchbar: true,
          searchbarPlaceholder: 'Search token',
          pageTitle: 'Add tokens',
        }"
        @smartselect:closed="updateSelectedtokensData"
      >
        <!-- v-model绑定到选中值变量selectedTokens -->
        <select v-model="selectedTokens" 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>

额外说明 #

如果需要设置默认选中值，在调用update方法之后再调用setValue方法即可，要确保update执行完成后再操作选中值。

内容的提问来源于stack exchange，提问作者Fabrice Fabiyi