Vue.js中Props传参类型错误及数组过滤逻辑实现问题

1. Fixing the Prop Type Warnings #

Those Invalid prop warnings are happening because your parent component HelloWorld is passing undefined values to the List component's props. Here's what went wrong:
When you loop through the pizzas array to render List components, you're using pizas.pname and quantitys.qname instead of referencing the current loop item's properties. Since pizas (likely a typo for pizzas) is the array itself, not an individual item, accessing .pname on it returns undefined—same for quantitys.qname.

Fix: #

Update your parent component's loop to use the individual items from your arrays. For example:

<!-- HelloWorld.vue -->
<template>
  <div>
    <!-- Assuming you're looping through pizzas and quantitys in sync -->
    <List 
      v-for="(pizza, index) in pizzas" 
      :key="index"
      :pname="pizza.pname" 
      :qname="quantitys[index].qname"
    />
  </div>
</template>

This way, you're passing the actual pname from each pizza item and qname from the corresponding quantity item, which will resolve the type check failures.

2. Verifying the Array Filtering Logic #

Let's align your computed logic with the business requirement: Show matching content only when a matchpizza item's pname exists in pizzas and qname exists in quantitys; otherwise show "No availability".

Step 1: Refine the Filtering Logic #

First, create helper sets to check existence efficiently (this is cleaner than looping every time):

<!-- List.vue -->
<script>
export default {
  props: {
    pname: String,
    qname: String
  },
  computed: {
    filteredContent() {
      // Create sets of existing pnames and qnames for quick lookups
      const pizzaNames = new Set(this.pizzas.map(p => p.pname));
      const quantityNames = new Set(this.quantitys.map(q => q.qname));

      // Filter matchpizza items that meet both conditions
      const matches = this.matchpizza.filter(item => {
        return pizzaNames.has(item.pname) && quantityNames.has(item.qname);
      });

      // Return matches or the fallback message
      return matches.length > 0 ? matches : "No availability";
    }
  }
};
</script>

Step 2: Update the Template to Use the Filtered Result #

In your template, render the filtered content accordingly:

<template>
  <div>
    <div v-if="typeof filteredContent === 'string'">
      {{ filteredContent }}
    </div>
    <div v-else>
      <!-- Render your matching items here -->
      <div v-for="item in filteredContent" :key="item.id">
        {{ item.pname }} - {{ item.qname }}
      </div>
    </div>
  </div>
</template>

This logic ensures you only show items where both pname and qname exist in their respective arrays. If no matches are found, it displays the fallback message as required.

内容的提问来源于stack exchange，提问作者T dhanunjay