Creé un cuadro de selección usando los códigos fuente @vueform/multiselect en Vue.js 3. Pero no funciona correctamente aunque defino :infinite=true . ¿Dónde me estoy perdiendo? La demostración de la documentación está aquí . Número de ejemplo "14". Recibí un error en el compilador como " No se pueden leer las propiedades de undefined (leyendo 'noOptions') en Object.onOpen._cache.._cache". ¿Alguna ayuda? ¡¡Gracias por adelantado!!
Modelo
<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(); } } " />Guion
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, }; },