VUE卡渲染图片两次

Question

我有一个新闻网站，呈现每个卡片和图片两次。

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

有一个名为doubleUp的组件

   created() {
    this.doubleUp()
   },

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

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

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

Answer 1

此doubleUp函数使您的图像显示两次。this.images已经有了图像数组。你又一次把每个图像都推到了每个循环中。

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)
},

如果你想保持图像数组不变，并且只想加倍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)
},