I am encountering challenges while trying to implement a basic search feature on a JSON file obtained through an API.
Each component works independently: I can successfully retrieve data from the API, perform searches on non-API data, and even search certain APIs' data as well.
The main problem arises when the data fails to display even without any filtering. The error message displayed in the console reads
this.items.filter is not a function
Thank you very much!
<input type="text" v-model="search">
<div v-for="content in filteredItems" :key="content.name">
<span> {{ content }}</span>
</div>export default {
name: "hello",
data: () => ({
search: '',
items: []
}),
mounted() {
var self = this;
axios
.get("https://jsonplaceholder.typicode.com/posts/1")
.then(function(response) {
console.log(response);
self.items = response.data;
})
.catch(function(error) {
console.log(error);
});
},
computed: {
filteredItems: function() {
let searchTerm = (this.search || "").toLowerCase();
return this.items.filter(function(item) {
let title = (item.title || "").toLowerCase();
return title.indexOf(searchTerm) > -1;
});
}
}If I switch the API to this one, for example, the search feature functions correctly.