Как обновить значение props динамически?

Question

[abuamr]

С помощью компонента А генерируется продукты в компоненте А-1.
В компоненте А-1 есть несколько экземпляров компонента А, хочу изменить значение price (props) только для одного экземпляра.

P.S могу через $emit сделать, но price меняется для всех product_item в компоненте А-1.

Компонента А

<template>
	<div class="products-item">
		<a href="#"><img :src="src" :alt="title" class="img-fluid" style="width: 100%;"></a>
		<div class="products-item-body">
			<h5><a href="#" class="text-body">{{ title }}</a></h5>
			<small>{{ composition }}</small>
				<div class="row align-items-center">
					<div class="col">
						<h5 class="mb-0" @click="getPrice">{{ price }}</h5>
					</div>
					<div class="col text-right">
						<a href="javascript:void(0);" class="addToCart" data-toggle="tooltip" data-placement="top" title="В корзину"><i class="far fa-shopping-basket"></i></a>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['title', 'composition', 'price', 'src'],
		data() {
			return {
				value: 1,
				x: 33,
				qty: 1
			}
		},
		methods: {
			move(event) {
				let rect = event.target.getBoundingClientRect();
				this.x = event.pageX - rect.left + 28;
			},
			plus() {
				return this.qty > 0 && this.qty < 99 ? this.qty++ : '';
			},
			minus() {
				return this.qty != 1 ? this.qty-- : '';
			},
			getPrice() {
				alert(this.price);
			}
		},
		computed: {
			total() {
				return this.value
			}
		}
	}
</script>

Компонента А-1

<template>
	<section class="popular">
		<div class="container">
			<div class="products products_slide">
				<div class="row">
					<div class="col">
						<product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="105.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
					</div>
					<div class="col">
						<product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="101.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
					</div>
					<div class="col">
						<product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="108.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
					</div>
					<div class="col">
						<product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="120.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
					</div>
					<div class="col">
						<product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="101.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
	import popular_title from './CaptionComponent.vue';
	import product_item from './ProductItemComponent.vue';

	export default {
		components: {
			product_item
		}
	}
</script>

Песочница

Comments

[Roman K]

Код в песочницу

[Анатолий]

Если генерить product_item по массиву объектов с описаниями и ценами (через v-for), то в чем проблема? Меняете цену у соотв-щего объекта и всё.
Если у вас так всё и есть, а не как в показанном коде, тогда уже действительно реальный пример с массивом в jsfiddle.

[abuamr]

Анатолий, Roman Kitaev,
Песочница: https://jsfiddle.net/861e273g/
При изменении веса продукта, как изменить цену изменяемого продукта?

[Анатолий]

Именно цену или все-таки стоимость?

Answer 1

[lavezzi1]

Простая идея как это может быть реализовано. Дальше сами допилите. Вам нужно подумать над структурой данных. Цена должна быть числом, а валюту уже подставляйте при рендере данных.

https://jsfiddle.net/lavezzi/dy3mw8bk/15/