javascript - Vue卡片渲染图片两次

Question

我有一个新闻网站，可以将每张卡片和图片渲染两次。

https://codepen.io/Teeke/pen/QWKQydz

有一个组件叫 doubleUp

   created() {
    this.doubleUp()
   },

这两行是否将图片渲染两次？：

    newImage.id  = image.id * 2
        this.images.push(newImage)

我尝试将 * 2 值更改为 * 1 或 * 6。但这对渲染的卡片数量没有影响。我不确定为什么图片要渲染两次。

标签： javascriptvue.js

Answer 1

此doubleUp功能使您的图像显示两次。this.images已经有图像数组。然后你再次推送每个图像 foreach 循环。

doubleUp() {
  //fake a bunch of data
  let localImages = JSON.parse(JSON.stringify(this.images))

  localImages.forEach((image) => {
    let newImage = image
    newImage.id  = image.id * 2
    this.images.push(newImage)
  })

  setTimeout(() => {
    this.loading = false
    //then run replacePleaceholders
    this.replacePlaceholders()
  }, 200)
},

如果你想保持图像数组相同并且只想 doubleup id，你必须这样做。

doubleUp() {
  //fake a bunch of data
  let localImages = JSON.parse(JSON.stringify(this.images))
  this.images = []; // <------------------------
  localImages.forEach((image) => {
    let newImage = image
    newImage.id  = image.id * 2
    this.images.push(newImage)
  })

  setTimeout(() => {
    this.loading = false
    //then run replacePleaceholders
    this.replacePlaceholders()
  }, 200)
},