Tengo un campo de entrada con una función que filtra una lista cada vez que se presiona una tecla y muestra los resultados de la lista filtrada en el navegador.
En el escritorio funciona muy bien, sin embargo, la lista solo se muestra en los móviles Android después de presionar la barra espaciadora o la tecla Intro. Para hacerlo más extraño, después de presionar espacio o la flecha "enter" en el teclado de Android, la lista se comporta como debería; filtrar y mostrar la lista a medida que escribe. ¿Hay alguna manera de obtener el comportamiento que estoy buscando? He probado @keydown, @keyup y @keypress.
Campo de entrada con modelo v
<input v-model="searchValue" type="text" @input="filterStories" />Función de filtro y propiedades de datos
data() { return { searchValue: '', filteredStories: [] } }, methods: { filterStories() { if (this.stories.length) { let filtered = this.stories.filter( (story) => story.name.toLowerCase().includes(this.searchValue.toLowerCase()) ) if (!this.searchValue) { this.filteredStories = [] } else { this.filteredStories = filtered } } }Lista de salida en el navegador
<li v-for="(story, i) in filteredStories" v-else-if=" stories.length && filteredStories.length && searchValue " :key="i" > <NuxtLink :to="'/' + story.full_slug" > {{ story.name }} </NuxtLink> </li>Espero que esto proporcione suficiente información. ¡Gracias!
Referencia a los documentos de vuejs:
Para los idiomas que requieren un IME (chino, japonés, coreano, etc.), notará que v-model no se actualiza durante la composición del IME. Si también desea atender estas actualizaciones, use el evento de entrada en su lugar.
Tal vez sea por el tipo de tu teclado. Pero si no funciona en todos los teclados, intente usar value y @input en lugar de v-model :
<input :value="searchValue" type="text" @input="filterStories" /> Y en el método filterStory :
filterStories(e) { this.searchValue = e.target.value if (this.stories.length) { let filtered = this.stories.filter( (story) => story.name.toLowerCase().includes(this.searchValue.toLowerCase()) ) if (!this.searchValue) { this.filteredStories = [] } else { this.filteredStories = filtered } } }