vue使用v-for渲染数据,并把的数据作为参数,调用methods方法进行新的异步操作,获取新数据

本文讨论了在Vue中如何处理v-for渲染数据时结合异步操作的问题。作者遇到的问题是,通过v-for循环渲染MV列表,需要在每次渲染时根据MV的ID异步获取额外信息,但遇到了因异步操作导致的数据获取不准确的难题。解决方案是利用Vue的响应式系统,先通过Ajax获取MV数据,然后遍历数组,针对每个MV对象使用Ajax获取详细信息,并使用Vue.set方法将新信息添加到MV对象中,确保视图的更新。最后,可以直接在模板中使用mv.likedCount等属性来展示新获取的数据。
摘要由CSDN通过智能技术生成

问题

通过ajax获取mv列表到数组中,然后通过v-for渲染到页面上。此时,想要通过每次渲染时得到mv的id作为参数,传入一个函数中进行新的异步操作,但是遇到了问题。

<div class="card" v-for="(mv,index) in recommendMVs" :key="index">
        <div id="mv">
            <img :src="mv.picUrl" >
            <div id="infoOfMv">
                <span >{
   {
   mv.name}}</span>
                <span>by.{
   {
   mv.artistName}}</span>
            </div>
        </div>
        <div id="about">
            <img src="../assets/imgs/thumb.png" alt="" class="thumb cardIcon" >
            <span>{
   {
   mv.likedCount}}</span>
            <img src="../assets/imgs/commend.png" alt="" class="commends cardIcon">
            <span>{
   {
   mv.commentCount}}</span> 
        </div>
    </div>

代码中 recommendMVs 是获取到的mv数组,数组元素是对象。mv对象有id属性,可以通过这个id请求到mv的相关信息,如点赞数,评论数等。

原本想法是把mv.id作为参数,传入一个函数,像这样:

 <img src="../assets/imgs/thumb.png" alt="" class=
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值