Показать сообщение отдельно
  #1 (permalink)  
Старый 02.07.2018, 03:40
Интересующийся
Отправить личное сообщение для toyboy__37 Посмотреть профиль Найти все сообщения от toyboy__37
 
Регистрация: 25.01.2016
Сообщений: 15

подгрузка json во vue(или js)
Доброй ночи!
Задача: Нужно добавить карточки товаров на страницу. Все данные нужно подгрузить из файла 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]
		}
	}	
});
Ответить с цитированием