Vue v-для вложенного массива - PullRequest
Новая
       35

Vue v-для вложенного массива

0 голосов
/ 11 февраля 2020

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

Мой набор данных выглядит следующим образом: 

[ 
   { 
      "dd":"February",
      "md":[ 
         { "dag":"2020-02-01" },
         { "dag":"2020-02-02" },
         { "dag":"2020-02-03" }
      ]
   },
   { 
      "dd":"March",
      "md":[ 
         { "dag":"2020-03-01" },
         { "dag":"2020-03-02" },
         { "dag":"2020-03-03" }
      ]
   }
]

Я хотел бы таблицу, которая выглядит следующим образом. 

|  February  |   March    |
| 2020-02-01 | 2020-03-01 |
| 2020-02-02 | 2020-03-02 |
| 2020-02-03 | 2020-03-03 |

Я получил это работает, но это дает мне 2 таблицы вместо одной. 

<template v-for="(md2, index) in md2s">  
  <table :key=index >
    <thead >
      <tr align="center">
        <th  style="width: 80px">{{md2}}</th>
      </tr>
    </thead>
    <tr v-for="(date, index) in md2.md" :key=index> 
      <td align="center" >{{date.dag }}</td>
    </tr>
  </table>
</template>

Вся помощь приветствуется.

br. Erik

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Вы можете использовать другой способ создания l oop (одна таблица, несколько столбцов). В этом случае для заполнения каждого заголовка следует использовать 'dd', а каждый столбец - элементами md. 

var data=[ 
   { 
      "dd":"February",
      "md":[ 
         { 
            "dag":"2020-02-01"
         },
         { 
            "dag":"2020-02-02"
         },
         { 
            "dag":"2020-02-03"
         }
      ]
   },
   { 
      "dd":"March",
      "md":[ 
         { 
            "dag":"2020-03-01"
         },
         { 
            "dag":"2020-03-02"
         },
         { 
            "dag":"2020-03-03"
         }
      ]
   }
];

new Vue({
	el:'#app',
  data:{
    md2s: data
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id=app >
<table  >
  <thead >  
         <tr align="center">
          <th v-for="(md2, index) in md2s" :key=index  style="width: 80px">{{md2.dd}}</th>
          </tr>
  </thead>
  <tbody>
    <tr  align="center">
      <td v-for="(md2, index) in md2s" :key=index style="width: 80px">
         <div v-for="(mdcol, col) in md2.md" :key=col>
         {{mdcol.dag}}
         </div> 
      </td>
    </tr>    
  </tbody>
</table>
</div>

https://jsfiddle.net/bn5g1v09/1/

0 голосов
/ 11 февраля 2020

Вам нужны две разные итерации. Один для заголовка, а другой для тела таблицы. Для заголовка нужно всего лишь добавить название месяца в заказ. Фрагмент с вычисленным свойством months показывает, как это сделать. Это завершает итерацию заголовка и первый.

Второй этап немного сложнее. Вам нужно заранее знать, сколько будет строк, для этого я создал вычисляемое свойство maxLength, которое просматривает каждый md и выдает большую. Затем для каждой строки выполните итерацию по каждому месяцу, а затем проверьте, достаточно ли в месяце дат с помощью v-if и ищет ли он нужную дату из индекса и структуры вложенных данных. Это возобновляет вторую итерацию.

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

var app = new Vue({
  el: '#app',
  data: () => ({
    nested: [
      { "dd": "February",
        "md": [{ "dag": "2020-02-01" },{ "dag": "2020-02-02" },{ "dag": "2020-02-03" },{ "dag": "2020-03-04" }]
      },
      { "dd": "March",
        "md": [{ "dag": "2020-03-01" },{ "dag": "2020-03-02" },{ "dag": "2020-03-03" }]
      },
      { "dd": "January",
        "md": [{ "dag": "2020-01-01" }]
      }
    ]
  }),
  computed: {
    staticMonths() {
      return Array.from(Array(12),(e,i)=>new Date(25e8*++i).toLocaleString('en-US',{month: 'long'}));
    },
    months() {
      return this.nested.map(item => item.dd).sort((a, b) => {
        const A = this.staticMonths.indexOf(a);
        const B = this.staticMonths.indexOf(b);
        return A-B;
      });
    },
    maxLength() {
      return this.nested.reduce((accum, curr) => accum > curr.md.length ? accum : curr.md.length, 0);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(item, index) in months">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="index in maxLength">
        <td v-for="item in months">
          <span v-if="nested.find(nest => nest.dd === item).md.length > index-1">
            {{nested.find(nest=>nest.dd===item).md[index-1].dag}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
...