Vue components display images duplicated

Question

Vue components display images duplicated

My website features a news section where each card and image appear twice on the screen.

Visit my CodePen profile for more information.

One of the components responsible for this is called doubleUp

   created() {
    this.doubleUp()
   },

I'm wondering if these two lines of code are causing the duplication:

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

I've experimented with changing the multiplication value to *1 or *6, but it doesn't affect the number of cards displayed. I'm puzzled as to why the images keep rendering twice.

javascript vue.js

Answer 1

Answer №1

The doubleUp function is designed to display your images twice by duplicating the existing this.images array and pushing each image again in a loop.

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 replacePlaceholders
    this.replacePlaceholders()
  }, 200)
},

If you only want to double up the id values in the images array without adding duplicate images, follow these steps:

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 replacePlaceholders
    this.replacePlaceholders()
  }, 200)
},

Answer 2

The doubleUp function is designed to display your images twice by duplicating the existing this.images array and pushing each image again in a loop.

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 replacePlaceholders
    this.replacePlaceholders()
  }, 200)
},

If you only want to double up the id values in the images array without adding duplicate images, follow these steps:

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 replacePlaceholders
    this.replacePlaceholders()
  }, 200)
},

Vue components display images duplicated

Answer №1

Similar questions

passport.js and express: TypeError - Router.use() must be given a middleware function, but instead received a ' + gettype(fn)

"Comparing JSON objects can be done by checking if their IDs match, and if they do, assigning the value to another object

Is it possible to replace the prototype of an object with a different object?

Setting up child routes can be easily accomplished by following these steps

Is it possible for an Ajax request to finish before the DOM finishes loading?

Create a rectangle on a canvas using coordinates that have been translated relative to the original image

Issue with Ionic toggles not updating the correct local storage entry

Exploring the power of jQuery's deferred method and utilizing the ajax beforeSend

The binding style in vue.js using the ternary operator is throwing an error: Unexpected token ']'

Ways to activate offline assistance with HTML5 history api

wiping out a column in Excel spreadsheets with the help of Node.js or its corresponding node modules

How can I create a notification popup triggered by a button click with Ajax and Javascript?

What is the best way to pass a module from the controller to a Jade/Pug template and then use it as an argument in an event handler within the template?

The header in datatables.net is positioned on the side of the table rather than at the top

Encountering an issue while attempting to generate a dialog popup with jQuery

Ext JS - A grid cell containing varying values, accompanied by a selection of combo boxes

JQuery.each is causing an issue due to a potential conflict between JSON and string data types

JavaScript is throwing an error because `csv[i]` has not

How can I check if the HTML syntax in Vue is valid?

Parent component failing to capture events triggered by child component