[Vuejs]-Issue when trying to pass array value as string via props in Vuejs?

You have mistyped the passing data and quantities is array you need to loop over it. Look at your props it should be pizas.pname and quantitys[index].qname you are missing the trailing ‘s’

List component

<List :content="matchpizza" :pname="pizas.pname" :qname="quantity.qname" />

Object

  pizas: [
        {
          pname: "chicken pizza",
        },
        {
          pname: "chicken pizza spl",
        },
        {
          pname: "mutton pizza",
        },
        {
          pname: "plain pizza",
        },
      ],
    
      quantitys: [
        {
          qname: "one",
        },
        {
          qname: "*two",
        },
        {
          qname: "*three",
        },
        {
          qname: "*four",
        },
        {
          qname: "*five",
        },
      ],

EDIT

You’re accessing an undefined variable in quantitys.qname and you mistyped piza.name with pizas.name.

Solution 1

<template>
  <div>
    <div v-for="(piza, index) in pizas" :key="index"> <!--- Add Index, and replace piza.name with index just in case the same name might happen later
      {{ piza.pname }}
      <List
        :content="matchpizza"
        :pname="piza.pname" <!-- change pizas.name to piza.name
        :qname="quantitys[index] ? quantitys[index].qname : ''" <!-- add this
      />
    </div>
  </div>
</template>

You can use piza.pname because you’ve looped through pizas in the div tag. You use index (starts from 0) after declaring it along with piza. Then, you can access quantitys value based on the working index and the index will be the same as the index you’re accessing the pizas.

Solution 2

<template>
  <div>
    <div v-for="(piza, index) in pizas" :key="index"> 
      {{ piza.pname }}
      <List
        :content="matchpizza"
        :pname="pizas[index].pname" <--- Use index to access the values of pizas
        :qname="quantitys[index] ? quantitys[index].qname : ''"
      />
    </div>
  </div>
</template>

Here is just the same with the above code. It’s just the breakdown of how piza.pname and pizas[index].pname work in the same way.

Newly Added

If you want to display the result from chicken pizza –> one –> later to chicken pizza –> later –> one, you need to edit the List component:

<div 
   v-for="match in matchpizza" 
   :key="match.matchnum"
   :class="{ green: match.availability === 'buy now',
             red: match.availability === 'later',
           }"
>
    <div class="next-data-two">{{ match.availability }}</div> <!-- this is on the top now -->
    <div v-for="quantity in quantitys" :key="quantity.qname">
        {{ quantity.qname }}
    </div> <!-- this is on the bottom now -->
</div>