Trying to pass the values of an array to the component-CodePudding

I'm trying to get a single value (for that specific component) from an array. The thing is that I want to get single value but not every value in my array (for example everything about Vodka). Because my component doesn't handle dynamic route properly and the page is blank, it is obviously problem with an array.

But here is the warning message which I get: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next at <SingleDrink SingleDrink= (6) [{…}, {…}, {…}, {…}, {…}, {…}]

This is how my array looks like (from Drinks.vue):

data(){
    return{
    drinks: [
                    {product:"Wine", price: 149.99, url: require('../assets/images/grasevina.jpg')},
                    {product:"Beer", price: 12.99, url: require('../assets/images/corona.jpg')},
                    {product:"Vodka Smirnoff", price: 119.99, url: require('../assets/images/smirnoff.jpg')},
                    {product:"Cocktail Malibu", price: 89.99, url: require('../assets/images/malibu.jpg')},
                    {product:"Jack Daniels Honey", price: 169.99, url: require('../assets/images/jack_daniels.jpg')},
                    {product:"Strawberry liqueur", price: 149.99, url: require('../assets/images/liker-malina.jpg')}    
                ],
}
},

the logic of passing values on the component (Drinks.vue):

 <div v-if="drinks.length">
  <div v-for="drink in drinks" :key="drink.product">
    <SingleDrink :SingleDrink="drink"/>
  </div>
</div>

Here is the template section where I'm trying to fetch single value from array (SingleDrink.vue component):

<div id="SingleDrink">
    <h1>{{SingleDrink.product}}</h1> 
</div>

These are the props (SingleDrink.vue component):

props: {
  SingleDrink: {
      type: Object,
      required: true,
    },
  },

This is the v-for that is used to represent every item from an array (Home.vue):

<div  v-for="(items) in items" :key=items.id>
                            <div >
                                <div >
                                        <div >
                                            <img :src="items.url" alt="" />
                                            <h2>{{items.price}} kn</h2>
                                            <p>{{items.product}}</p>
                                            <router-link to="/cart" ><i ></i>Add to cart</router-link>
                                        </div>
                                        <div >
                                            <div >
                                                <h2>{{items.cijena}} kn</h2>
                                                <p>{{items.proizvod}}</p>
                                                <button @click.prevent="route(items)" >Details</button>
                                                <router-link to="/cart" ><i ></i>Add to cart</router-link>
                                            </div>
                                        </div>
                                </div>
                                <div >
                                    <ul >
                                        <li><a href="#"><i ></i>Add to favorite</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

CodePudding user response：

As per my understanding, you are trying to pass whole array in your child component SingleDrink and then accessing it as a single drink and because of that you are facing this issue.

Solution: You need to use v-for on the div element and then pass each product (which is drink in this case) in the SingleDrink child component over the iteration.

Additionally we have added v-if condition so that v-for only executes if and only if there are some elements in the drinks array.

Look at the below code for better understanding:

<template v-if="drinks.length">
   <div v-for="drink in drinks" :key="drink.product">
      <SingleDrink :single-drink="drink" />
   </div>
</template>

Inside your SingleDrink component:

<div id="SingleDrink">
    <h1>{{ SingleDrink.product }}</h1>
</div>

props: {
  SingleDrink: {
    type: Object,
    required: true,
  },
},

Here with this above code, you will have single object with all the details of the product in your child component SingleDrink

Additional Info: It's good practice at add type and required properties while using props.