Задача на сайте интернет магазина, работающего на 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">∅ 130</li>
<li v-on:click="chooseDiam" data-diam="150" class="chimney_diam-item">∅ 150</li>
<li v-on:click="chooseDiam" data-diam="200" class="chimney_diam-item">∅ 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('&#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>
Понимаю, возможно на говнокодил, не волшебник пока, только учусь.
Возможно, данную задачу можно решить более рациональным способом, буду благодарен за любой совет!
Простой