Vue.js Перебор двумерных массивов

Question

Всем привет, есть такая задача. У меня есть массив состоящий из массивов, которые в итоге нужно показать, вот в такой таблице.

Вот пример двумерного массива

items: [
        ['Группы', 'Блюдо', 'Цена', 'Порция'],
        ['Паста','Корбанара','400р','330гр'],
        ['Бургер','БигБро','300р','250гр']
      ]

Я пытался сделать циклом v-for. Но сталкиваюсь с проблемой, я знаю что первый массив, всегда будет шапка данной табилы. А вот последующие элементы уже строки. Так вот, как сделать так, чтобы первой итерацией взять первый массив в массиве items, а в другой итерации игнорировать первый массиве items.

Так же, я пробовал сделать это вот таким подходом:

for (let subArr of arr) {
    for (let elem of subArr) {
        console.log(elem);
    }
}

Ну вот такой пример я заколхозил:

createTable () {
      let arr = this.items
      let table = document.querySelector('.table')

      for (let i = 0; i < arr.length; i++) {
        let tr = document.createElement('tr')

        for (let f = 0; f < arr[i].length; f++) {
          let td = document.createElement('td')
          td.innerHTML = arr[i][f]
          tr.appendChild(td)
          td.classList.add('border')
        }
        table.appendChild(tr)
      }
    }

Ну можно переписать на forOf, но там у мня проблема рендеринга. Наверняка есть подход, как это сделать из самого <template>, да и еще чтобы сохранить реактивность.

Буду очень благодарен за помощь, а то я уже жестка туплю над такой простой задачей) Спасибо!

Answer 1

<table>
  <tr>
    <th v-for="(item, item_i) in items[0]" :key="item_i">{{ item }}</th>
  </tr>
  <tr v-for="(row, row_i) in items" v-if="row_i > 0" :key="row_i">
    <td v-for="(item, item_i) in row" :key="item_i">{{ item }}</td>
  </tr>
</table>

Answer 2

Сделайте два вычисляемых свойства (это полезно во первых для более читаемого кода, во вторых так удобнее манипулировать данными не вынося их в разметку темплейта):

computed: {
  headers() {
    const [headers] = this.items;
    return headers;
  },
  rows() {
    const [, ...items] = this.items;
    return items;
  },
}

Соответственно далее используйте их в шаблоне (r${i} - эта запись нужна для создания уникальных ключей, лучше всего используйте любой uid генератор)

<table>
  <tr>
    <th v-for="(item, i) in headers" :key="`h${i}`">
      {{ item }}
    </th>
  </tr>
  <tr v-for="(row, i) in rows" :key="`r${i}`">
    <td v-for="(item, j) in row" :key="`c${i}${j}`">
      {{ item }}
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Vue.js Перебор двумерных массивов

Ответы (2 шт):