list有15条数据，为什么用v-for只有1条数据？

Question

如题，用的异步调取接口获得数据后，赋值给list，在成功回调时打印list有15条数据，但是用v-for却只出来最后一条数据，这是为什么？？懵！

 <div v-if="list" v-for="item in list">
    <lists v-bind="item"></lists>
 </div>

---

---

我发现了一个奇怪的问题，当我把代码改成下面所示时，组件那个一个都不显示，但是p倒是15条都显示了，也没报错~

 <div v-if="list" v-for="item in list">
     <lists v-bind="item"></lists>
 </div>
 <p v-if="list" v-for="item in list">
     {{item.title}}
 </p>

我再改成如下所示，组件也好p也好15条都显示了，不过就是会报错：Error in render: "TypeError: Cannot read property 'list' of undefined"

 <div v-if="list" v-for="item in list">
     <lists v-bind="item"></lists>
 </div>
 <p v-if="res.data&&res.data.list" v-for="item in res.data.list">
     {{item.title}}
 </p>

Answer 1

诡异啊~~没人回答下吗？

Answer 2

v-if 和 v-for 不要在同一个标签上使用 有优先级的问题 官方文档

Answer 3

记得先在 data 里给 list 初始化成空数组

<template v-if="list && list.length">
    <div v-for="(item, index) in list">
        <lists v-bind="item" :key="index"></lists>
    </div>
</template>