Добрый день,есть карточки товара с выбором размера товара который привязан к массиву db.json выглядит это вот таким образом в массиве
{
"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},
{"size":"33",
"weight":"720гр",
"price":1020
},
{"size":"40",
"weight":"720гр",
"price":1020
}
]
Встал вопрос как меняя размер непосредственно в карточке товара автоматически обновлять информацию о весе и цене в зависимости от выбранного размера все так же в карточке товара. если что вот код карточки товара vue
<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-variables
:options="product_data.variations"
class="ar-catalog-item__variations">
</ar-variables>
<div class="ar-catalog-item-bottom">
<p class="ar-catalog-item-bottom__price"> Цена: {{ product_data.price}}₽</p>
<button
v-if="product_data.quantity === 1"
@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 arVariables from './ar-variables.vue'
export default {
name: 'ar-catalog-item',
components: {
arVariables
},
props: {
product_data: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
}
},
computed: {
},
methods: {
...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)
}
}
Средний
