Почему не отрабатывает V-for после обновления DATA свойства полученными из базы данных?

Задача на сайте интернет магазина, работающего на 1-с Bitrix, создать страницу с расчетом стоимости комплекта дымохода.
Клиент задает необходимые параметры по высоте, диаметру, способы подключения дымохода и в конце получает таблицу список необходимых элементов комплекта с указанием количества и стоимости.


- При выборе из DATA - свойства VUE reqestlist:- выбирается список ID - необходимых товаров,
- данные присваиваются свойcтву demand: null, - наблюдаемое и после изменения отрабатывает watch: функция - AJAX запрос к базе данных и получения данных в JSON необходимых товаров (названия, цены, ссылки на изображения и т.д.).
- Массив с данными присваивается DATA свойству list: ( изначально значение задано - null) , и после должны в цикле v-for в шаблоне отрисовываться в виде таблицы.

<script>
  var app = new Vue({
    el: '#add',
		data: {
			way:{
				type: null,
				isActive: false
			},
			diam: {
				type: null,
				show: false
			},
			hight: {
				type: null,
				show: false
			},
			demand: null,
			reqestlist: {  //Списки ID - выборки необходимой группы товаров
				nasad: {
					130: '1602,1659,1617,1650,1573,1561,1656,1644,1638',
					150: '1603,1660,1619,1651,1574,1562,1657,1645,1639',
					200: '1604,1661,1618,1652,1575,1563,1658,1646,1640'
				},
				nasten: {
					130: '1605,1564,1579,1632,1596,1617,1650,1573,1561,1656',
					150: '1606,1565,1579,1633,1597,1619,1651,1574,1562,1657',
					200: '1607,1566,1579,1634,1598,1618,1652,1575,1563,1658'
				}
			},
			list: null,
			items: {
				show: false
			}
		},
		methods: {
			chooseWay: function(event) {
				this.way.type = event.currentTarget.getAttribute('data-typeinstal');
				let elemWay = document.querySelectorAll('.chimney_way_img-block');
				for(let i=0; i < elemWay.length; i++) {
					elemWay[i].classList.remove('chimney_way-active');
				}
				event.currentTarget.classList.add('chimney_way-active');
				this.diam.show = true;
			},
			chooseDiam: function name(even) {
				this.diam.type = even.target.dataset.diam;
				let elemWay = document.querySelectorAll('.chimney_diam-item');
				for(let i=0; i < elemWay.length; i++){
					elemWay[i].classList.remove('chimney_diam-active');
				}
				event.currentTarget.classList.add('chimney_diam-active');
				this.hight.show = true;
				//console.log(this.diam.type)
			},
			chooseHight: function (event) {
				this.hight.type = event.target.value
				this.demand = this.reqestlist[this.way.type][this.diam.type];
				//console.log(this.demand)
			}
		},
		watch: {
		 	demand: function (val) {   //  при изменении свойства demand, получения списка ID, AJAX - запрос 
				let request = new XMLHttpRequest();
				request.open('POST', 'http://nordpechi.ru/catalog/chimneys/calculation-chimneys/online.php', true);
				request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
				
				request.onreadystatechange = function() {
					if (this.readyState === 4) {
						if (this.status >= 200 && this.status < 400) {
						// Success!					
						this.list = JSON.parse(this.responseText); // Свойству list - массив данных от сервера с товарами			
						//console.log(this.list);
					} else {
						// Error 
						alert('Ошибка прилетела!')
						}
					}
				};
				request.send('ListId='+this.demand);				
				this.items.show = true;	
			}
		}
  })
</script>


В шаблоне в таблице с результатами - после получения из базы данных товаров и присвоения их свойству List, в цикле v-for - должен формироваться список товаров, однако этого не происходит. Не смотря на присвоение свойству массива полученных данных, и изменения изначально заданного значения - null, - v-for не отрабатывает. В консоли ни каких сообщений об ошибках нет.

Понимаю, что ошибка где-то в логике, но не могу понять где. Прошу помощи сообщества!

<div id="add">

	<div class="chimney_wrap">			
			<h3>Укажите способ подключения дымохода</h3>
			<section class="chimney_way-wrap">
				<div class="chimney_way_img-wrap">
					<div v-on:click.prevent="chooseWay" data-typeinstal="nasad" class="chimney_way_img-block">
						<img src="/upload/img/schiedel/online/nasad.jpg" alt="Насадной" class="chimney_way_img">
						<p class="chimney_way_img-title">Насадной</p>
					</div>
					<div v-on:click="chooseWay" data-typeinstal="nasten" class="chimney_way_img-block">
						<img src="/upload/img/schiedel/online/nasten.jpg" alt="Настенный" class="chimney_way_img">
						<p class="chimney_way_img-title">Настенный</p>
					</div>
				</div>
			</section>

			<section v-show="diam.show" class="chimney_diam-wrap">
				<h3>Выбирите диаметр дымохода</h3>
				<ul class="chimney_diam-list">
					<li v-on:click="chooseDiam" data-diam="130" class="chimney_diam-item">&empty; 130</li>
					<li v-on:click="chooseDiam" data-diam="150" class="chimney_diam-item">&empty; 150</li>
					<li v-on:click="chooseDiam" data-diam="200" class="chimney_diam-item">&empty; 200</li>
				</ul>
			</section>

			<section v-show="hight.show" class="chimney_hight-wrap">
				<h3>Укажите высоту дымохода</h3>

				<select v-model="hight.type" @change="chooseHight" class="chimney_hight-list">
					<option value="4">4 м</option>
					<option value="5">5 м</option>
					<option value="6">6 м</option>
					<option value="7">7 м</option>
					<option value="8">8 м</option>
					<option value="9">9 м</option>
					<option value="10">10 м</option>
				</select>
			</section>

			<!-- Таблица с результатами -->
			<div v-show="items.show" class="chimney_list-wrap">
				<table class="chimney_list">
					<thead>
						<tr>
							<th>№</th>
							<th>Photo</th>
							<th>Наименование</th>
							<th>Кол-во</th>
							<th>Цена</th>
						</tr>
					</thead>
					<tbody>

						<tr v-for="(elem, index) in list"> <!--  Элемент итерируется в цикле v-for VUE.JS -->
							<td>{{ index +1}}</td>
							<td><a v-bind:href="elem.link" target="_blank"><img v-bind:src="elem.picture" v-bind:alt="elem.name"></a></td>
							<td><a v-bind:href="elem.link" target="_blank">{{ elem.name.replace('&amp;#216;', 'Ø')  }}</a></td>
							<td>1</td>
							<td>{{ elem.price.toLocaleString() }}</td>
						</tr>

						<tr class="chimney_list-result">
							<td colspan="3">Итого:</td>
							<td>9</td>
							<td>12019</td>
						</tr>
					</tbody>
				</table>
			</div>

	</div>
</div>


Понимаю, возможно на говнокодил, не волшебник пока, только учусь.
Возможно, данную задачу можно решить более рациональным способом, буду благодарен за любой совет!
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
@voland700 Автор вопроса
Вопрос снят. Ошибка найдена.
Пытался работать с this data- внутри другой функции, которая имеет свой контекст!
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
21 авг. 2019, в 12:03
3000 руб./в час
21 авг. 2019, в 11:44
750 руб./в час
21 авг. 2019, в 11:32
1000 руб./в час