Vue v-for嵌套数组

Question

我有一个嵌套数组，我想在 table 中显示。但是，我无法让我的嵌套数组正确显示。

我的数据集如下所示：

[ 
   { 
      "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" }
      ]
   }
]

我想要一个像这样的 table。

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

我得到了这个工作，但它给了我 2 table 秒而不是一个。

<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。埃里克

Answer 1

您需要的是两个不同的迭代。一个用于 header，另一个用于 table body。对于 header，您只需在订单上添加月份名称即可。该代码段显示了计算出的属性 months 如何执行此操作。这完成了 header 迭代和第一个。

第二个有点复杂。您需要事先知道会有多少行，因为我计算了属性 maxLength 来搜索每个 md 并给出较大的一个。然后对每个月的每一行进行迭代，然后使用 v-if 验证该月是否有足够的日期，以及它是否确实从索引和嵌套数据结构中查找所需的日期。这将恢复第二次迭代。

下面的代码片段是一个工作示例，其中包含更复杂的数据，显示了不同 md 大小和自动月份排序可能发生的情况。

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>

Answer 2

您可以使用不同的方式来创建循环（一个 table，多个列）在这种情况下，用 'dd' 填充每个 header，用 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/

Vue v-for嵌套数组

Vue v-for nested array

arrays

nested

vue.js

v-for