果子蓝蓝
侠客
侠客
  • 最后登录2021-09-18
  • 发帖数4
阅读:430回复:0

[vue]外层数组循环内层数组的数据

楼主#
更多 发布于:2021-07-22 12:11
我从后端拿到的数据没有背景图片的地址,而我需要背景图片,故要添加本地图片的路径,循环后端拿到的数据,有4个,防止之后添加这个数据,所以循环添加本地背景图片的数组。(代码块是vue3的)


/*读书专题*/
api.ReadingTopics().success((res)=>{
  // state.ReadTopicsList=res.data;
  let backgroundImageArr=[require("./image/topic1.png"),require("./image/topic2.png"),require("./image/topic3.png"),require("./image/topic4.png")]
  let arrlength=res.data.length;

  state.ReadTopicsList=res.data.map((item,index)=>{
    console.log(index%arrlength)
    return{
      ...item,
      backgroundImageUrl:backgroundImageArr[index%arrlength]
    }
  })
  console.log(state.ReadTopicsList)
})

<div v-for="(item,index) in state.ReadTopicsList"
     :key="index"
     :style="{backgroundImage:`url(${item.backgroundImageUrl})`}">
  <span>item.name </span>
</div>
[果子蓝蓝于2021-08-18 10:23编辑了帖子]
游客


返回顶部

公众号

公众号