My Vue.js code includes a search input with a dropdown menu populated by an API data array called categories. I am attempting to implement a filter on the search input so that when a value is typed, it filters the dropdown menu items based on the API data. However, my current code does not seem to be applying the filter correctly. Can anyone provide assistance?
<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>