Struggling with an API listing project. I need to display the results of an API call and allow users to search for specific values. The displayed result is already in v-for, so filtering it again isn't an option. I'll have to make another axios call upon clicking the search button and filter the response. The API's structure is complex, making it challenging to simply attach +this.searchedValue because it's a nested array. Is this approach feasible? Open to alternative solutions.
The code below displays the list, but I'd like to generate a new list based on the searched value entered in the search bar.
<ul>
<li @click="select(content.id)"
v-for="(content,id) in contents"
:key="id"
>
<h4> {{ content.department.label }} </h4>
<p> {{ content.location.city }} </p>
</li>
</ul>
mounted() {
axios.get('https://api/')
.then(response => {
this.contents = response.data.content;
})
}
I attempted looping in the filter as follows, but the list didn't appear:
computed: {
Filter: function(){
return this.contents.filter((content) => {
return content.match(this.filter);
});
}
}