I am currently working on implementing a custom filter search feature for my project. However, I am encountering an issue where the filtering based on keywords does not seem to work as expected. Instead of displaying the filtered posts, it simply shows all posts. It appears that the value of this.search is always empty in this scenario. What could be a potential solution to address this issue?
<form>
<fieldset class="w-100 left">
<input type="text" placeholder="Filter posts by keyword" v-model="search"/>
</fieldset>
</form>
<div>
<div id="mainSec">
<div v-for="post in filteredPosts">
<div v-for="result in results" v-if="post.userId == result.id" class="left ml-3 mt-3" >
<p >{{result.name}}</p>
<p>{{result.email}} | {{result.address.city}}</p>
</div>
<p style="float:left;width:100%"><strong>{{post.title.toUpperCase()}}</strong></p>
<p style="float:left;width:100%">{{post.body}}</p>
</div>
</div>
</div>
</html>
<script>
var vm = new Vue({
el: '#mainSec',
data() {
return {
search : '',
results : [],
posts : []
};
},
async created() {
try{
axios.get(urlUsers).then(response => {
this.results = response.data
});
axios.get(urlPosts).then(response => {
this.posts = response.data
});
}
catch(error){
console.log("Error is " + error);
}
},
computed : {
filteredPosts (){
if(this.search){
return this.posts.filter((item)=>{
return item.title.match(this.search);
})
}else{
return this.posts;
}
}
})
</script>