I created a select box using @vueform/multiselect source codes in Vue.js 3. But it doesn't work properly even though I define :infinite=true. Where am i missing? Documentation demo is here. Example number "14". I got error on compiler like "Cannot read properties of undefined (reading 'noOptions') at Object.onOpen._cache.._cache." Any helps? Thanks in advance!!
Template
<Multiselect
v-model="value"
mode="tags"
placeholder="Select Languages"
:close-on-select="false"
:filter-results="false"
:min-chars="0"
:resolve-on-load="false"
:infinite="true"
:limit="10"
:clear-on-search="true"
:delay="0"
:searchable="true"
:options="
async (query) => {
return await fetchLanguages(query);
}
"
@open="
(select$) => {
if (select$.noOptions) {
select$.resolveOptions();
}
}
"
/>
Script
data() {
return {
value: [],
};
},
setup() {
const fetchLanguages = async (query) => {
// From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset
let where = "";
if (query) {
where =
"&where=" +
encodeURIComponent(
JSON.stringify({
ProgrammingLanguage: {
$regex: `${query}|${query.toUpperCase()}|${
query[0].toUpperCase() + query.slice(1)
}`,
},
})
);
}
const response = await fetch(
"https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage" +
where,
{
headers: {
"X-Parse-Application-Id":
"XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL", // This is the fake app's application id
"X-Parse-Master-Key": "Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv", // This is the fake app's readonly master key
},
}
);
const data = await response.json(); // Here you have the data that you need
return data.results.map((item) => {
return {
value: item.ProgrammingLanguage,
label: item.ProgrammingLanguage,
};
});
};
return {
fetchLanguages,
};
},