undefinedfix
Sign in

List has 15 data, why use v - For only one data?

derBobby edited in Tue, 27 Sep 2022

For example, after using the asynchronous call interface to get the data, assign it to list, and print 15 pieces of data in the list when the callback is successful, but only the last piece of data is produced with V-for. Why?? Confused!

clipboard.png

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

clipboard.png


I found a strange problem. When I changed the code to the one shown below, none of the components were displayed, but p showed all 15 items, and no error was reported~

 <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>

I'll change it to the following: either P or 15 components are displayed, but an error will be reported: error in render: "type error: 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>
3 Replies
ichster
commented on Wed, 28 Sep 2022

Weird ~ ~ no one answers?

AIdrick
commented on Wed, 28 Sep 2022

V-IF and V-for don't use priority issue official documents on the same tag

xjsnx
commented on Wed, 28 Sep 2022
记得先在 data 里给 list 初始化成空数组

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