在子组件中使用方法和计算属性 [英] Use methods and computed properties in child component

问题描述

在我的 List 组件中，我有一个方法可以计算某些类别中数组的长度.

In my List component I have a method which count the length of the array within certain categories.

methods: {
    getLengthofaCategory(cat) {
      const LowerCaseSearch = this.search.toLowerCase();
      let categoryCount = this.products.filter(
        product =>
          (product.name.toLowerCase().includes(LowerCaseSearch) ||
            product.category.toLowerCase().includes(LowerCaseSearch)) &&
          (!this.checked.length || this.checked.includes(product.category)) &&
          product.category === cat
      );

      return categoryCount.length;
    }
  }

在这里查看我在 这个沙箱中的设置.

但我想要复选框旁边的值(来自我的 CheckBox 组件).

But I want the values next to the checkboxes (which are coming from my CheckBox component).

如何将 getLengthofaCategory 方法的逻辑放到我的 CheckBox 组件中?

How do I get the logic from the method getLengthofaCategory into my CheckBox component?

所以我可以在 v-for 循环中的 CheckBox 组件内使用 {{ getLengthofaCategory('tennis') }} .然后也许我也可以使用 category.value 而不是硬编码，例如网球"作为参数?

So I am able to use {{ getLengthofaCategory('tennis') }} in the v-for loop, inside the CheckBox component. And then maybe I can also use category.value instead of hardcoding e.g 'tennis' as the paramater?

推荐答案

在你的 list.vue 中，你可以使用已经创建的计算函数 filteredData 而不是再次进行过滤.这节省了一些性能，因为在 Vue 中，计算属性是缓存"的.一次运行.

In your list.vue, you can use the already created computed function filteredData instead of doing the filter again. This saves some performance because in Vue, computed properties are "cached" once run.

因此，您可以创建一个新的计算函数，该函数创建一个对象，每个类别的键和值可以是该类别中的数量或产品数组.

So you can create a new computed function that creates an object with keys per category and value can either be just the amount or an array of products in this category.

然后我会通过一个 prop 将这个计算出的值传递给 CheckBox 组件，然后在 CheckBox 组件中，你可以显示关于多少项的 .length 或值每个类别都有:

I would then pass this computed value to the CheckBox component via a prop, then inside the CheckBox component, you can display the .length or value regarding how many items each category has:

List.vue:

    computed: {
    //...
      amountPerCategory() {
        return this.filteredData.reduce((categories, product) => {
          if (!(product.category in categories)) {
            categories[product.category] = [];
          }

          categories[product.category].push(product);

          return categories;
        }, {});
      }
    }

CheckBox.vue:

CheckBox.vue:

        <span class="ml-2 text-gray-700 capitalize">{{ category.value }}</span> -
        <span
          v-if="count[category.value]"
          class="ml-2 text-gray-700 capitalize"
        >{{ count[category.value].length }}</span>

 count: {
   type: Object,
   default: () => ({})
 }

https://codesandbox.io/s/admiring-ellis-4hojl?file=/src/components/CheckBox.vue

这篇关于在子组件中使用方法和计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！