Vue v-for 嵌套数组

Question

我有一个嵌套数组，我想在表格中显示它。但是，我无法正确显示嵌套数组。

我的数据集如下所示：

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

Answer 1

您需要的是两次不同的迭代。一个用于表头，另一个用于表体。对于标题，您只需在订单上添加月份名称。 sn-p 使用计算属性 months 显示如何执行此操作。这样就完成了header迭代和第一个。

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

下面的 sn-p 是一个工作示例，其中包含更复杂的数据，显示了不同 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

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