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