v-for创建重复组件导致重复请求接口的BUG
in 前端 with 0 comment

v-for创建重复组件导致重复请求接口的BUG

in 前端 with 0 comment

用的vant的List、Collapse,大致如下格式:

当切换折叠面板时,list组件就请求接口拉取数据展示到自定义组件中。

<van-collapse v-model="activeCollapse" @change="onCollapseChange" accordion>
    <van-collapse-item v-for="(record, index) in recordList" :key="index" :name="record.id">
        <van-list
            v-model="****"
            :finished="****"
            @load="****"
        >
            <foo>自定义组件...</foo>
        </van-list>
    </van-collapse-item>
</van-collapse>

在第二次开始的折叠操作中,List组件就会重复请求两次接口导致数据重复。

解决的办法也很简单,保证每次只渲染了一个List就行:

在onCollapseChange事件触发后记录下当前的record.id(这里用selectId表示),然后在List组件里加上v-if判断就解决啦。

<van-collapse v-model="activeCollapse" @change="onCollapseChange" accordion>
    <van-collapse-item v-for="(record, index) in recordList" :key="index" :name="record.id">
        <van-list
            v-if="selectId === record.id" // 加上这个判断
            v-model="****"
            :finished="****"
            @load="****"
        >
            <foo>自定义组件...</foo>
        </van-list>
    </van-collapse-item>
</van-collapse>
Comments are closed.