Ребята всем привет.
Пытаюсь разобраться во вью, помогите.
есть вот такой дочерний компонент
<template>
<div class="product clearfix">
<div class="unit-left">
<img src="./../assets/margo.jpg" class="clearfix">
</div>
<div class="unit-body">
<h2 class="product-name">product.title</h2>
<p class="product-description">Description</p>
</div>
<div class="unit-right">
<div class="price">product.price</div>
<div class="ordering">
<!--<button class="add-button" @click="addToCart(p)" v-if="qtyInCart == 0">Заказать</button>-->
<div>
<button class="inc clearfix" @click="addToCart(p)">-</button>
<span class="qty clearfix">7</span>
<button class="dec" @click="removeFromCart(p)">+</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
prop: ['product'],
methods: mapActions([
'addToCart',
'removeFromCart',
])
}
</script>
далее он импортируется в родителя, вот он
<template>
<ul>
<li class="product product-item" v-for="product in products" :product="product">
<product-item ></product-item>
</li>
</ul>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import ProductItem from './../components/ProductItem.vue'
export default {
computed: mapGetters({
products: 'allProducts',
//qtyInCart: 'qtyInCart'
}),
components: {
ProductItem
},
created () {
this.$store.dispatch('getAllProducts')
}
}
</script>
дело в том что он выводит все product from products однако title and price выводит как
product.title and product.price соответственно.
Почему не подставляет название и цену соответствующего продукта. Что я делаю не так, чего не понял?
P/S: кошмар забыл двойные фигурные скобки, после того как сделал правку посыпались ошибки такого рода:
[Vue warn]: Property or method "product" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <ProductItem> at C:\OpenServer\domains\pizzaStore\src\components\ProductItem.vue)
[Vue warn]: Error in render function:
(found in <ProductItem> at C:\OpenServer\domains\pizzaStore\src\components\ProductItem.vue)
TypeError: Cannot read property 'title' of undefined
