Soy nuevo en JS/Vue. Estoy tratando de hacer una entrada de búsqueda dinámica. Estoy filtrando el cambio de entrada, filtrado es una matriz de objetos obtenidos de mi API. Lo extraño es que el método computado no devuelve ningún dato a menos que use this.term antes del retorno, puede ser un console.log() o cualquier otra cosa con mi v-model . Qué me estoy perdiendo ?
var stops = new Array(); document.addEventListener("DOMContentLoaded", () => { fetch('http://localhost:8080/api/stops/') .then(response => response.json()) .then((data) => { window.data = data; Object.keys(window.data).forEach(k => { stops.push(window.data[k]); }); }) .catch(err => { console.log(err); }); }); Vue.component('sidebar', { delimiters: ['{(', ')}'], data: () => { return { term: '', } }, computed: { filtered() { <!--followng line needs to be here for the func to return data-- > this.term = this.term return stops.filter(p => p.nameno.toLowerCase().includes(this.term.toLowerCase())); } }, template: ` <div id="sidebarContain" > <input id="sidebar-search" type="text" v-model="term" > <div v-for="tram in filtered" :key="tram.name"> <span >{(tram.nameno)}</span> <span ></span> </div> </div> `, methods: { }, });Es porque las stops no están en su objeto de datos Vue, por lo que no puede reaccionar a los cambios. Mueva la lógica de carga al método mounted , agregue una propiedad de stops al objeto de datos y configúrela usando this.stops = ... en el método mounted :
Vue.component('sidebar', { delimiters: ['{(', ')}'], data: () => { return { term: '', stops: [] } }, computed: { filtered() { this.term = this.term return this.stops.filter(p => p.nameno.toLowerCase().includes(this.term.toLowerCase())); } }, mounted() { fetch('http://localhost:8080/api/stops/') .then(response => response.json()) .then((data) => { window.data = data; Object.keys(data).forEach(k => { this.stops.push(data[k]); }); }) .catch(err => { console.log(err); }); }, template: ` <div id="sidebarContain" > <input id="sidebar-search" type="text" v-model="term" > <div v-for="tram in filtered" :key="tram.name"> <span >{(tram.nameno)}</span> <span ></span> </div> </div> `, methods: { }, });