vue v-for 的一个暗坑

v-for 的坑网上随便一搜该有一大堆了。这次遇到的比较奇葩。

比如有下面的template。

<template>
...

<md-layout v-for="reply in replies">
 <p>{{reply.content}}</p>
</md-layout>

...
</template>

replies通过API获取。过程中发现，当api返回[]的时候，我们通过api添加reply，并把顺利添加的结果添加到replies里面，可这个时候，view并没有重新render。而分明replies里面已经有一个元素。

刷新浏览器，这个时候api返回已经不为空，继续往replies添加元素，view 顺利render。

为什么就第一个元素的时候不行？ 我也不知道。但是确保添加第一个元素的时候重新render，经过试验发现必须降v-for的这个block包裹在一个container里面。

比如如下就没问题了。

<md-layout md-column>
  <md-layout v-for="reply in replies">
    <p>{{reply.content}}</p>
  </md-layout>
</md-layout>

以上。