Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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]
		}
	}	
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгрузка страницы с js blvckmeister Angular.js 10 27.03.2017 12:10
BackEnd/FrontEnd Developer (Native JS) Abab Работа 0 25.12.2016 10:56
Получить из mysql json строку и преобразовать в js объект 0leg9 AJAX и COMET 7 18.10.2014 15:21
Обработка JSON в JS devastor AJAX и COMET 2 16.09.2014 07:36
работа с JSON в JS EventPromo Элементы интерфейса 0 25.04.2011 14:09