Есть такой вот код в формате
"products":[
{
"badge":"новинка",
"image": "8.jpg",
"sku":"420гр",
"name": "Болоньезе",
"except":"Томатный соус, моцарелла, красный лук, фарш, помидор",
"price":369,
"id": "1",
"avalible": true,
"category":"Роллы",
"type":"pizza",
"variations":
[
{
"id":"1110",
"size":"25",
"weight":"720гр",
"price":500},
{ "id":"3335",
"size":"33",
"weight":"720гр",
"price":1020
},
{"id":"3338",
"size":"40",
"weight":"720гр",
"price":1020
}
],
"variation_id":222
},
Есть такая вьюшка
<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">
<p class="ar-catalog-item__sku">{{ product_data.sku }}</p>
<p class="ar-catalog-item__name">{{ product_data.name }}</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>
<ar-variation
:options="product_data.variations"
@select="mySelect()">
</ar-variation>
<div class="variations"
v-for="variation in product_data.variations"
:key="variation.id">
<a class="ar-variable"
:class="{ active: isActive[variation.id] }"
@click="selectSize(variation.id)">
Здесь: {{ variation.price }}
</a>
</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';
import arVariation from './ar-variables.vue'
export default {
name: 'ar-catalog-item',
components: {
arVariation
},
props: {
product_data: {
type: Object,
default() {
return {
}
}
},
},
data() {
return {
isActive: {
type: Object
},
selected: ''
,
}
},
created() {
},
computed: {
},
methods: {
mySelect() {
this.$emit('select')
},
selectSizes(size) {
let vm = this;
// i == i || 0
// vm.selectedSize = vm.product_data.variations[i]
vm.$set(vm.isActive, (size) || !vm.isActive, [size]);
console.log('size checked')
},
...mapActions([
]),
//* Кнопки отвечающие за действие увелечения и убавления количества в корзине из карточки товара *//
addToCart() {
this.$emit('addToCart', this.product_data); //* Добавляем в корзину товар
},
decrementInProductCard() { //* Убавляем товар
let pd = this;
pd.$emit(
'decrementInProductCard',
pd.product_data.quantity--)
}
},
mounted() {
this.$set(this.product_data, 'quantity', 1)
}
}
</script>
Что является карточкой товара ,который день уже сижу ломаю голову ,пытаюсь понять,как при смене вариативной опции товара в данном случае размера менять в карточке товара стоимость и вес
