Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 vue.js Table  [new]
Valeriu
Member

Откуда: Chisinau
Сообщений: 2152
Доброго дня всем.
Я пару недель учусь освоить vue.js и испытываю некоторые трудности
по сравнению с чистым JS. Пожалуйста не пеняйте сильно ..
Пробую сформировать таблицу из этой структуры JSON но получаю пусто:
+
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 код:
+
<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>

Спасибо.
16 окт 20, 12:29    [22215343]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
vb_sub
Member

Откуда:
Сообщений: 782
Что не получается то?
Навскидку, что сразу бросается в глаза,
2) Неправильно объявлена data
  data(){
  return {
    files: []
  }
},

2)итерироваться нужно по массиву, а не по свойству
{"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"}]
16 окт 20, 13:40    [22215412]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
Valeriu
Member

Откуда: Chisinau
Сообщений: 2152
vb_sub,

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

где то так
new Vue({
el: '#dispecer',
data: {
        mumps_P1: []
               }
});
16 окт 20, 13:58    [22215431]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
vb_sub
Member

Откуда:
Сообщений: 782
Valeriu,
значит необходимо преобразовать mumps_P1 в тот вид, который подойдет для Vue-компонента.
16 окт 20, 14:52    [22215492]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 339
Valeriu,

на всякий случай, таблица с поиском и сортировкой https://jsfiddle.net/vo1phqut/
и массивы/объекты для наглядности выводить в консоль лучше через console.table, типа такого
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/
18 окт 20, 10:52    [22216202]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
Valeriu
Member

Откуда: Chisinau
Сообщений: 2152
SQLPowerUser,
Спасибо .
Я понял смысл. Думал что все это нужно делать средствами Vue
На чистом JS делал примерно так же
18 окт 20, 18:42    [22216327]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
Valeriu
Member

Откуда: Chisinau
Сообщений: 2152
SQLPowerUser,
Нажал случайно не отписав до конца.
Придется делать через дополнительный метод как я понял.
На данный момент при использования колбеком (чистый JS )примерно я делаю так
+
// 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 );  
}   
18 окт 20, 18:48    [22216328]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
SQLPowerUser
Member

Откуда: ссылка в профиле
Сообщений: 339
Valeriu,

забыл сказать, но может Вы уже в курсе, что v-for работает не только для массивов, но и для объектов
И небольшие пожелания для блока View data Sanctiuni:
вместо var рекомендуется использовать let и const, вместо appendChild просто append.
Ну и сокращения по желанию
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'))
});
18 окт 20, 19:39    [22216337]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
Агнец за бортом
Member

Откуда:
Сообщений: 1351
Valeriu,

<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>


Сообщение было отредактировано: 19 окт 20, 00:50
19 окт 20, 00:54    [22216427]     Ответить | Цитировать Сообщить модератору
 Re: vue.js Table  [new]
Valeriu
Member

Откуда: Chisinau
Сообщений: 2152
Решил немножко по другому.
Из БД выяснилось что приходили лишние данные (типа - name , cod, sal)
Все данные строилось первоначально через разделитель. Так и оставил ничего не переделывая.
+
mumps_P1: {"P1":{"1":"Nistor Igor Mihail/22/800",
                                  "2":"Racu Mihail Vladimir/14/900",
                                  "3":"Mihalas Vladimir/23/800"}}
               }
+
        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;
            }
        }
+
<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>

Спасибо всем.
20 окт 20, 15:55    [22217495]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить