Sunday, 3 October 2021

Framework 7 + Vue 3 smart select display dynamically select option

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


from Framework 7 + Vue 3 smart select display dynamically select option

No comments:

Post a Comment