I'm fairly new to coding in JS and Vue.js. I've been attempting to create a dynamic search input feature that filters an array of objects fetched from my API based on user input. The strange issue I'm coming across is that the computed method returns no data unless I use this.term before the return statement. It could be something as simple as a console.log() or any other action involving my v-model. What am I overlooking here?
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: {
},
});