powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / vue.js Table
10 сообщений из 10, страница 1 из 1
vue.js Table
    #40009184
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Доброго дня всем.
Я пару недель учусь освоить vue.js и испытываю некоторые трудности
по сравнению с чистым JS. Пожалуйста не пеняйте сильно ..
Пробую сформировать таблицу из этой структуры JSON но получаю пусто:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
new Vue({
el: '#dispecer',
data: {
        mumps_P1: {"P1":{"1":"name: Nistor Igor Mihail, cod: 22, sal: 800",
                                  "2":"name: Racu Mihail Vladimir, cod: 14, sal: 900",
                                  "3":"name: Mihalas Vladimir , cod: 23, sal: 800"}}
               }
});


HTML код:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Cod</th>
      <th>Salary</th>

    </tr>
  </thead>
  <tbody>
    <tr   v-for="row in 'mumps_P1'" :key="P1"> 
      <td>{{mumps_P1.name}}</td>
      <td>{{mumps_P1.cod}}</td>
      <td>{{mumps_P1.sal}}</td>
     </tr>
  </tbody>
</table>


Спасибо.
...
Рейтинг: 0 / 0
vue.js Table
    #40009216
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Что не получается то?
Навскидку, что сразу бросается в глаза,
2) Неправильно объявлена data
Код: javascript
1.
2.
3.
4.
5.
  data(){
  return {
    files: []
  }
},


2)итерироваться нужно по массиву, а не по свойству
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
{"1":"name: Nistor Igor Mihail, cod: 22, sal: 800",
 "2":"name: Racu Mihail Vladimir, cod: 14, sal: 900",
 "3":"name: Mihalas Vladimir , cod: 23, sal: 800"}

должно быть

 [{"1":"name: Nistor Igor Mihail, cod: 22, sal: 800"},
 {"2":"name: Racu Mihail Vladimir, cod: 14, sal: 900"},
 {"3":"name: Mihalas Vladimir , cod: 23, sal: 800"}]
...
Рейтинг: 0 / 0
vue.js Table
    #40009226
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vb_sub,

Я получаю такую структуру в динамике из СУБД по запросу
Код: javascript
1.
2.
3.
           axios.get('/cache/do/' + mumps_strResultRoutine + '/').then(response => {
                var mumps_ParamArray = response.data.split('{][}');
                this.mumps_P1 = mumps_ParamArray[0];


где то так
Код: javascript
1.
2.
3.
4.
5.
6.
new Vue({
el: '#dispecer',
data: {
        mumps_P1: []
               }
});
...
Рейтинг: 0 / 0
vue.js Table
    #40009256
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Valeriu,
значит необходимо преобразовать mumps_P1 в тот вид, который подойдет для Vue-компонента.
...
Рейтинг: 0 / 0
vue.js Table
    #40009564
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Valeriu,

на всякий случай, таблица с поиском и сортировкой https://jsfiddle.net/vo1phqut/
и массивы/объекты для наглядности выводить в консоль лучше через console.table, типа такого
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
const mumps_P1 = {
	"P1": {
		"100": "name: Nistor Igor Mihail, cod: 22, sal: 800",
		"200": "name: Racu Mihail Vladimir, cod: 14, sal: 900",
		"300": "name: Mihalas Vladimir, cod: 23, sal: 800"
	},
	"P2": {
		"100": "name: Obi-Wan Kenobi, cod: 02, sal: 1200",
		"200": "name: Luke Skywalker, cod: 10, sal: 900",
		"300": "name: Ivan Ivanov, cod: 08, sal: 840",
		"400": "name: Oliver Queen, cod: 16, sal: 950"
	}
};
console.table(mumps_P1);


Если json как в первом посте, то можно так: https://jsfiddle.net/1t7e9L6n/
Ну а если структура двухуровневая и меняться не будет, то можно попроще, без рекурсии: https://jsfiddle.net/1t7e9L6n/1/
...
Рейтинг: 0 / 0
vue.js Table
    #40009610
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
SQLPowerUser,
Спасибо .
Я понял смысл. Думал что все это нужно делать средствами Vue
На чистом JS делал примерно так же
...
Рейтинг: 0 / 0
vue.js Table
    #40009611
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
SQLPowerUser,
Нажал случайно не отписав до конца.
Придется делать через дополнительный метод как я понял.
На данный момент при использования колбеком (чистый JS )примерно я делаю так
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
// View data Sanctiuni 
function SanctiuniView() {
    var tableHeaderRowCount = 1;
    var myTable = document.getElementById('table');
    var rowCount = myTable.rows.length;
    
    for (var i = tableHeaderRowCount; i < rowCount; i++) {
        myTable.deleteRow(tableHeaderRowCount);
    }
    var parc = document.getElementById('parc').value 
    var adrip = document.getElementById('ipnr').value
    var st = document.getElementById('st').value
    var dat = document.getElementById('day').value;
    var str = adrip + "*" + dat + "*" + parc + "*" + st;
    var arrTables = document.getElementById('table');
    var oRows = arrTables.rows;
    var numRows = oRows.length;
    var callback = function(req){
    var rtncode= req.responseText;
    //console.log(rtncode);
    var REBrtecARRAY = JSON.parse(rtncode);

for (let key1 of Object.keys(REBrtecARRAY)) {
    for (let key2 of Object.keys(REBrtecARRAY[key1])) {
        var newRow = arrTables.insertRow(-1, numRows );
        var contArr = REBrtecARRAY[key1][key2].split('/');
        for(var j = 0; j < contArr.length; j++) {
            newCell = newRow.insertCell(j);
            newCell.innerHTML = contArr[j];
            }
            var x = document.createElement("button");
            var y = document.createElement("button");
            x.className = 'btn btn-xs btn-outline-info';
            y.className = 'btn btn-xs btn-outline-danger';
            var edt = document.createTextNode("Edt");
            var del = document.createTextNode("Del");
            x.appendChild(edt);
            y.appendChild(del);
            x.onclick = function(){openRowSAN()};
            y.onclick = function(){dellRowSAN(this)}; 
            newCell.appendChild(x);
            newCell.appendChild(y);
            
        }
      } 
   };
   AJAX( "GET", "/cache/sanction/selectSANCTIUNE/" + str , null, callback );  
}   

...
Рейтинг: 0 / 0
vue.js Table
    #40009615
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Valeriu,

забыл сказать, но может Вы уже в курсе, что v-for работает не только для массивов, но и для объектов
И небольшие пожелания для блока View data Sanctiuni :
вместо var рекомендуется использовать let и const , вместо appendChild просто append .
Ну и сокращения по желанию
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function gid(i) { return document.getElementById(i); }
function cel(s) { return document.createElement(s); }
function qs(el, s) { return el.querySelector(s); }
function qsa(el, s) { return el.querySelectorAll(s); }
function gtn(el, s) { return el.getElementsByTagName(s); }

// или в стиле jQuery
const $ = (selector) => document.querySelector(selector)
const $$ = (selector) => document.querySelectorAll(selector)
const on = (elem, type, listener) => elem.addEventListener(type, listener)

on($('#toggle-left'), 'click', () => {
    $$(".start").forEach(elem => elem.classList.toggle('closed'))
});
...
Рейтинг: 0 / 0
vue.js Table
    #40009654
Агнец за бортом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Valeriu,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Cod</th>
      <th>Salary</th>

    </tr>
  </thead>
  <tbody>
    <tr   v-for="row in mumps_P1" :key="row.cod"> 
      <td>{{row.name}}</td>
      <td>{{row.cod}}</td>
      <td>{{row.sal}}</td>
     </tr>
  </tbody>
</table>
...
Рейтинг: 0 / 0
vue.js Table
    #40010182
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Решил немножко по другому.
Из БД выяснилось что приходили лишние данные (типа - name , cod, sal)
Все данные строилось первоначально через разделитель. Так и оставил ничего не переделывая.
Код: javascript
1.
2.
3.
4.
mumps_P1: {"P1":{"1":"Nistor Igor Mihail/22/800",
                                  "2":"Racu Mihail Vladimir/14/900",
                                  "3":"Mihalas Vladimir/23/800"}}
               }

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
        rows: function () {
            const chunks = []
            for (let key1 of Object.keys(this.mumps_P1)) {
                for (let key2 of Object.keys(this.mumps_P1[key1])) {
                    const tmpObj = {};
                    let contArr = this.mumps_P1[key1][key2].split('/');
                    Object.keys(contArr).forEach(function (key) {
                        tmpObj["Col" + key] = contArr[key];
                    });
                    chunks.push(tmpObj);
                }
                return chunks;
            }
        }

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Cod</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in rows"> 
      <td>{{ row.Col0 }}</td>
      <td>{{ row.Col1 }}</td>
      <td>{{ row.Col2 }}</td>
      <td>{{ row.Col3 }}</td>
    </tr>
  </tbody>
</table>


Спасибо всем.
...
Рейтинг: 0 / 0
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / vue.js Table
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]