how can i access a filtered array computed value in Vue.js?

Question

I am trying to access a filtered product array in my template but it is currently returning empty. I am calling it in the template as {{product}}. I double-checked that the params and name match by logging them, and they match. I am using VueX to store the array and retrieving it in the component. I tried replacing computed() with mounted() to no avail.

import axios from "axios";
import store from "../store/index.js";

export default {
  components: {
  },
  store,

  data: () => ({
    products: store.state.products
  }),
  computed: {
    product: function() {
      return this.products.filter(item => {
        item.name === this.$route.params.product;
      });
    }
  },

store

export default new Vuex.Store({
  state: {
    products: [
      {
        name: "Basic Deck",
        price: 7,
        description:
          "The Basic Deck includes 68 cards: 10 cards in each of six categories, three icon legend cards, five blank cards for developing your own backstory elements, and instructions.",
        image: require("@/assets/Draeorc.png"),
      },
      {
        name: "Card Bundle",
        price: 10,
        description:
          "The Card Bundle includes the Basic Deck, Technical Booster, Mystical Booster and instructions as a single self-printable PDF.",
        image: require("@/assets/Twilight.png"),
      },
      {
        name: "Full Bundle with Box",
        price: 12,
        description:
          "The Full Bundle includes the Basic Deck, Technical Booster, Mystical Booster, instructions and tuck box as a single self-printable PDF.",
        image: require("@/assets/Orig_Godbringer.png"),
      }
    ],
  },
});

router

  {
    path: "/buy/:product",
    name: "Buy",
    component: () => import( "../views/Buy.vue"),
    props: true,
  },

What is the contents of the products array? And, what value do you get from console.log(this.$route.params.product)? — crosen9999
– crosen9999, Commented Jul 27, 2020 at 21:29
it is an array of objects. if i log out console.log(item.name + " " + this.$route.params.product); i get Card Bundle Card Bundle so they match — Ren
– Ren, Commented Jul 27, 2020 at 21:30
Can you post the contents of both the array and the route so we can reproduce the issue? — crosen9999
– crosen9999, Commented Jul 27, 2020 at 21:31

Boussadjra Brahim · Accepted Answer · 2020-07-27 21:37:36Z

2

Inside the filter callback you're missing to return the condition return item.name === this.$route.params.product; so you should do :

  computed: {
    product: function() {
      return this.products.filter(item => {
       return item.name === this.$route.params.product;
      });
    }
  },

or

  computed: {
    product: function() {
      return this.products.filter(item => item.name === this.$route.params.product);
    }
  },

answered Jul 27, 2020 at 21:37

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

Ren Over a year ago

Thanks! I forgot that in ES6 to avoid writing return the code needs to be on one line...

Collectives™ on Stack Overflow

how can i access a filtered array computed value in Vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related