Vue js:filter on array not working in my code

Question

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>

It looks like FilterCategories should be a computed property, not a method — WillardSolutions
– WillardSolutions, Commented Jan 12, 2021 at 16:33
Can you try taking out the second return statement? Like return this.categories.filter(categories => { categories.category_name===this.inputValue }); — J Iguadeza
– J Iguadeza, Commented Jan 12, 2021 at 16:36
@JIguadeza the second return is the return from the inner filter function; it is correct — WillardSolutions
– WillardSolutions, Commented Jan 12, 2021 at 16:37

Nilesh Patel · Accepted Answer · 2021-01-12 16:56:11Z

1

using computed property would be better option

computed: {
       FilterCategories() {
        return  this.inputValue ? this.categories.filter(category => {
          return category.category_name.toLowerCase().includes(this.inputValue.toLowerCase())
        }) : this.categories;  
    }
}

**No changes are required in template

edited Jan 12, 2021 at 16:56

answered Jan 12, 2021 at 16:40

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js:filter on array not working in my code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related