试图将数组的值传递给组件

Question

我试图从数组中获得单个值(对于该特定组件)。问题是我想获得单个值，而不是数组中的每个值(例如关于伏特加的所有值)。因为我的组件不能正确处理动态路由，页面是空白的，这显然是数组的问题。

但是这里是我得到的警告消息:在执行调度程序刷新期间未处理的错误。这可能是Vue内部的错误。请在https://new-issue.vuejs.org/?repo=vuejs/vue-next上打开issue在& lt; SingleDrink SingleDrink = (6 ) [{...}, {...}, {...}, {...}, {...}, {...}]

这是我的数组看起来像(fromDrinks.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')}    
],
}
},

在组件上传递值的逻辑(Drinks.vue)):

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

这是模板部分，我试图从数组(SingleDrink)中获取单个值。vue组件):

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

这些是道具(SingleDrink)。vue组件):

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

这是v-for，用于表示数组(Home.vue)中的每个项。):

<div class="col-sm-4" v-for="(items) in items" :key=items.id>
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img :src="items.url" alt="" />
<h2>{{items.price}} kn</h2>
<p>{{items.product}}</p>
<router-link to="/cart" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</router-link>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>{{items.cijena}} kn</h2>
<p>{{items.proizvod}}</p>
<button @click.prevent="route(items)" class="btn btn-default add-to-cart">Details</button>
<router-link to="/cart" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</router-link>
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to favorite</a></li>
</ul>
</div>
</div>
</div>

Answer 1

根据我的理解，您正试图在子组件SingleDrink中传递整个数组，然后将其作为单个饮料访问，因此您正面临此问题。

解决方案:您需要在div元素上使用v-for，然后在迭代中传递SingleDrink子组件中的每个产品(在本例中是drink)。

另外，我们增加了v-if条件，使得v-for只在且仅当drinks数组中存在某些元素时才执行。

为了更好地理解，请看下面的代码:

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

---

SingleDrink组件内部:

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

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

在上面的代码中，您将在子组件SingleDrink中拥有单个对象，其中包含产品的所有详细信息

附加信息:在使用props时添加type和required属性是很好的做法。