Для того чтобы вытащить параметр цены в зависимости от Id в рамках Vue.js, вам понадобится использовать возможности реактивности и компонентов Vue.
1. Создайте компонент, который будет отображать информацию о продукте, включая его Id и цену. Назовем этот компонент "ProductInfo.vue".
<template>
<div>
<h2>Product Id: {{ productId }}</h2>
<h3>Price: {{ price }}</h3>
</div>
</template>
<script>
export default {
props: {
productId: {
type: Number,
required: true
}
},
data() {
return {
price: null
};
},
watch: {
productId: {
immediate: true,
handler(newVal, oldVal) {
// Выполнение запроса к серверу или обработка данных из хранилища
// для получения цены по заданному Id
this.price = this.getPriceById(newVal);
}
}
},
methods: {
getPriceById(productId) {
// Здесь вам нужно выполнить запрос к серверу или обратиться к хранилищу,
// чтобы получить цену для продукта с заданным Id
// Возвращаемая цена должна быть в нужном формате (например, числом или строкой)
// Ниже приведен пример с использованием моковых данных
const products = [
{ id: 1, price: 10 },
{ id: 2, price: 20 },
{ id: 3, price: 30 }
];
const product = products.find(p => p.id === productId);
return product ? product.price : null;
}
}
};
</script>
2. В главном компоненте или в компоненте, который использует "ProductInfo.vue", вставьте этот компонент и передайте ему требуемый параметр "productId".
<template>
<div>
<!-- Здесь передаем значение Id -->
<product-info :product-id="1" />
</div>
</template>
<script>
import ProductInfo from '@/components/ProductInfo.vue';
export default {
components: {
ProductInfo
}
};
</script>
Теперь, когда компонент "ProductInfo" получает значение "productId", он выполняет запрос к серверу или обрабатывает данные из хранилища, чтобы получить цену для соответствующего Id. Полученная цена затем отображается в шаблоне компонента, что позволяет вывести параметр цены в зависимости от Id.
Обратите внимание, что в данном примере используются моковые данные и метод getPriceById представлен для иллюстрации процесса извлечения цены по Id. В реальном приложении вам необходимо будет обратиться к фактическому источнику данных или API, чтобы получить нужную информацию о продукте.