В Vue.js можно легко реализовать изменение карточки товара в зависимости от выбора размера. Для этого мы можем использовать компоненты и связанные свойства.
Сначала нам нужно создать компонент для отображения карточки товара. Компонент может иметь свойство, которое будет представлять выбранный размер товара. Например, мы можем назвать это свойство "selectedSize".
Vue.component('product-card', {
props: ['selectedSize'],
template: `
<div>
<h2>Товар</h2>
<p>Размер: {{ selectedSize }}</p>
<p v-if="selectedSize === 'M'">Средний размер</p>
<p v-else-if="selectedSize === 'L'">Большой размер</p>
<p v-else-if="selectedSize === 'XL'">Очень большой размер</p>
</div>
`
});
Затем мы можем создать основной компонент приложения, который будет содержать список доступных размеров и компонент карточки товара.
new Vue({
el: '#app',
data: {
sizes: ['M', 'L', 'XL'],
selectedSize: ''
}
});
Теперь мы можем использовать компоненты в нашем HTML:
<div id="app">
<select v-model="selectedSize">
<option v-for="size in sizes" :value="size">{{ size }}</option>
</select>
<product-card :selectedSize="selectedSize"></product-card>
</div>
В этом примере мы создали выпадающий список размеров с использованием директивы v-model, которая связывает значение выбранного размера с переменной selectedSize.
Когда пользователь выбирает размер, значение selectedSize обновляется, и компонент карточки товара также обновляется, отображая выбранный размер и соответствующее описание.
Это лишь пример реализации и вы можете настроить его под свои нужды, добавив больше свойств и логики в компоненты.