如何在 Vue.js 中访问过滤后的数组计算值？

Question

我正在尝试访问我的模板中的过滤产品数组，但它当前返回为空。我在模板中将其称为{{product}}。我通过记录它们仔细检查了params 和名称匹配，它们匹配。我正在使用VueX 来存储数组并在组件中检索它。我尝试用mounted() 替换computed() 无济于事。

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

商店

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

路由器

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

Answer 1

在过滤器回调中，您缺少返回条件return item.name === this.$route.params.product;，因此您应该这样做：

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

或

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