[Vuejs]-Problem showing data using getters in vuex

0👍

In your component, there are 2 computed props:

  • customerData. This is defined by ...mapState("data", ["customerData"]) in your code. It stores the entire list of customers
  • getDate. This is defined by ...mapGetters("data", ["getDate"]). This computed property is storing the list of filtered users.

In you HTML, you are running a loop over customerData which shows the entire list:

<div v-for="item in customerData" :key="item.id">

Instead, you need to run loop over getDate like this:

<div v-for="item in getDate" :key="item.id">

Once you change this, you’ll see the list of filtered users.

Side Note: Please consider changing the getter name to filteredCustomerData instead of getDate.

Leave a comment