Есть такой элемент (карточка товара) с возможностью выбора опций / без
<template>
<div class="ar-catalog-item">
<span class="ar-catalog-item__badge">
<img :src="('../assets/images/' + product_data.badge)" alt="">
{{ product_data.badge }}
</span>
<img class="ar-catalog-item__img" :src="require('../assets/images/' + product_data.image)" alt="img">
<!-- <div v-for="(index, weight) in selectedVariation"
:key="weight"> Вес {{ index.weight }}</div> -->
<p class="ar-catalog-item__sku">{{ product_data.sku }}</p>
<i class="ar-catalog-item__bju">i</i>
<p class="ar-catalog-item__name">{{ product_data.name }} {{product_data.topping}}</p>
<p class="ar-catalog-item__except">{{ product_data.except }}</p>
<p v-if="product_data.type == 'pizza'" class="ar-catalog-item_sku_variations">Выберите размер</p>
<div v-if="product_data.type == 'pizza'">
<div class="variations" v-for="(variation,index) in product_data.variations"
:key="variation.variation_index">
<a class="ar-variable" :class="{ active:selectedVariation == index }"
@click.prevent="selectSize(variation)">
{{ variation.size }}
</a>
</div>
</div>
<p v-if="product_data.type == 'wok'" class="ar-catalog-item_sku_variations">Выберите начинку</p>
<div v-if="product_data.type == 'wok'">
<div class="variations" v-for="(variation,index) in product_data.variations" :key="variation.topping">
<a class="ar-variable" :class="{ active: selectedVariation == index }" @click="selectSize(variation)">
{{ variation.topping }}
</a>
</div>
</div>
<div class="ar-catalog-item-bottom">
<p class="ar-catalog-item-bottom__price"> Цена: {{ product_data.price }}₽</p>
<button @click="addToCart" class="ar-catalog-item-bottom__add_to_cart_btn btn">хочу</button>
<!-- <div class="ar-catalog-item-qty">
<span
v-if="product_data.quantity > 1"
class="ar-catalog-item-qty_btns">
<button class="item_quantity_btn"
@click="decrementInProductCard">-</button>
{{ product_data.quantity }}
<button class="item_quantity_btn"
@click="addToCart">+</button>
</span>
</div> -->
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
name: 'ar-catalog-item',
components: {
},
props: {
product_data: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
selectedVariation: {},
}
},
created() { },
watch: {},
computed: {
productDataResult() {
return this.product_data || this.selectedVariation
}
},
methods: {
selectSize(i) {
i = i || 0
let vm = this;
vm.$set(vm.selectedVariation, i || !vm.selectedVariation, i);
vm.product_data.price = vm.selectedVariation[i].price
vm.product_data.size = vm.selectedVariation[i].size
vm.product_data.sku = vm.selectedVariation[i].weight
vm.product_data.topping = vm.selectedVariation[i].topping
vm.$emit('select-size', this.selectedVariation, i);
},
...mapActions([
]),
//* Кнопки отвечающие за действие увелечения и убавления количества в корзине из карточки товара *//
addToCart() {
this.$emit('addToCart', this.productDataResult); //* Добавляем в корзину товар
},
decrementInProductCard() { //* Убавляем товар
let pd = this;
pd.$emit(
'decrementInProductCard',
pd.product_data.quantity--)
}
},
mounted() {
this.$set(this.product_data, 'quantity', 1)
}
}
,есть основной массив из которой берутся основные данные для заполнения карточки товара ,так же есть подмассив для опций некоторых товаров . столкнулся с проблемой : если я выбираю товар без опции он без проблем попадает в корзину по клику и отображается его цена и тп ,но если я при этом добавляю еще и товар с опцией то в корзине уже отображается NaN
вот если что образец массива
"products":[
{
"badge":"новинка",
"image": "8.jpg",
"sku":"420гр",
"name": "Болоньезе",
"except":"Томатный соус, моцарелла, красный лук, фарш, помидор",
"price":369,
"id": "1",
"size":"25",
"avalible": true,
"category":"Роллы",
"type":"pizza",
"variations":
[
{
"id":"1110",
"size":"25",
"weight":"320гр",
"price":500},
{ "id":"3335",
"size":"33",
"weight":"550гр",
"price":1020
},
{"id":"3338",
"size":"40",
"weight":"720гр",
"price":1020
}
]
},
{
"image":"3.jpg",
"sku":"250 гр/8 шт.",
"name": "Аляска",
"except": "Рис , нори ,сыр ,огурец ,лосось ,стружка тунца",
"price": 309,
"id": "2",
"avalible": true,
"category":"Роллы",
"type":"rolly",
"variations": null
},
