filter function shows an empty array

Question

I want to create a search filter. The way it works is a user inputs a text in the search bar, the input is stored using vuex and the result is shown in a different page. Here's an array of objects in a js file

export const productData = [
   {
     id: 1,
     name: "table",
     materials: "wood"
   },
   {
     id: 2,
     name: "table2",
     materials: "metal"
   },
   {
     id: 3,
     name: "chair",
     materials: "plastic"
   }
]

I want to filter using the user's input. Here's my function

import { productData } from '@/data/productData'

export default {
data() {
   return {
      products: productData
   }
},
computed: {
   userInput() {
      return this.$store.state.userInput
   },
   filterProducts: function() {
      return this.products.filter(q => q.name.match(this.userInput))
   }
}
}

When I console the userInput, it works fine. So the problem is in the filterProducts function. It shows an empty array if I console it? What am I doing wrong. Thank you.

edit: the reason I make a new variable called products is because the actual js file is more complex so I had to flatten the array. But the flatten process works fine so I thought I would just simplify the question.

Answer 1

The match function accepts a regex , not String. Give indexOf a try:

filterProducts: function() {
   return this.products.filter(q => q.name.indexOf(this.userInput) >= 0)
}