Доброй ночи!
Задача: Нужно добавить карточки товаров на страницу. Все данные нужно подгрузить из файла json. У каждой карточки есть три кнопки. При нажатии на на одну из кнопок должно меняться название, описание и т.д. Все эти данные тоже в джейсоне.
Пока получилось только выгрузить данные для всех карточек для одной кнопки. Сделал кнопки активными, но при клике подгрузка данных идёт во все карточки одинаковая...
Как можно реализовать динамическое переключение без обновление страницы с подгрузкой из json. Подскажите, пожалуйста, в какую сторону копать?
<div class="cond-items-wrap">
<div class="cond-items" v-for="item in items">
<div class="cond-item">
<div class="img-container">
<img :src="item.bigImage" alt="" class="img-responsive">
</div>
<div class="name_product">{{item.name}} {{char.name}} </div>
<div class="select-room">
<div class="room-title">Площадь до:</div>
<div class="room-list">
<span v-on:click="selectChar(index)" class="room-item active" v-for="(char, index) in chars">{{char.space}}</span>
</div>
<div class="descr_product" v-html="item.smallDescription"></div>
</div>
<a href="#" class="more-p">подробнее...</a>
<div class="price_action">
<span class="old-price">{{ char.oldPrice }} руб.</span>
<span class="new-price">{{ char.newPrice }} руб.</span>
</div>
</div>
</div>
</div>
function char(space, name, newPrice, oldPrice) {
return {
space, name, newPrice, oldPrice
}
}
const chars = [
char('20m', 'condmodel1', '28500', '23500'),
char('25m', 'condmodel2', '29500', '24500'),
char('35m', 'condmodel3', '30500', '25500')
]
var urlUsers = 'products.json';
var mv = new Vue ({
el: '.cond-items-wrap',
data: {
items: [],
chars: chars,
char: chars[0],
},
mounted() {
axios.get(urlUsers)
.then(response => this.items = response.data)
// .catch(function(error){
// this.items = 'error!!!!' + error;
// })
},
methods: {
selectChar: function(index) {
this.char = chars[index]
}
}
});