in my Vue js code i've created a search input with dropdown, the data of drop down are API data array categories
i'm trying to create filter on the input search bar so whenever a value typed in input search bar it should show in drop down menu from API, my code here isn't applying the filter (not working).any help?
<template>
<div class="dropdown">
<input v-model.trim="inputValue" class="dropdown-input" type="text" placeholder="Find country" />
<div v-show="inputValue" class="dropdown-list">
<div v-for="(category, index) in FilterCategories"
:key="index" class="dropdown-item"
{{ category.category_name }}
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import questionService from "../services/questionService";
export default {
name: "postComponent",
components: {},
data() {
return {
inputValue: '',
categories: [],
};
},
methods: {
FilterCategories() { //not working
return this.categories.filter(categories => {
return categories.category_name===this.inputValue
});
},},
mounted: function () {
questionService.getCategories().then((response) => {
this.categories = response.data.response;
});
},
};
</script>