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,
  },

Answer 1

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);
    }
  },