Creating new Vue components is happening towards the end of the loop

I am currently encountering an issue with my Vue components. I have structured them in a hierarchy where I have a post-index component displaying all posts, containing a post-view component for individual posts, and within that, a post-like component to handle likes and dislikes.

Everything works smoothly until I add a new post using the .unshift() method. This is when things start to go awry.

For example, everything looks perfect: https://i.sstatic.net/QW50a.png

But as soon as I create a new post: https://i.sstatic.net/YA47E.png

You can see that the like button is incorrectly highlighted, even though it hasn't been liked by the user. After investigating, I discovered that the value for liking or disliking the post is being duplicated from the post below. It seems like the new component is not being created for the new post, but rather added at the bottom. Is there a solution to this problem?

Inside the post-like component, there is only a data property called like, which manages the like and dislike functionality.

My assumption is that Vue is re-rendering from the top and adding new components at the bottom. How can I resolve this issue? Please let me know if you need more information on this matter.

javascriptvue.jscomponents

Answer №1

Ensure that when using :key in conjunction with v-for, you bind the post's id to it like this:

<ul>
  <li v-for="(article, index) in articles" :key="article.id">
    <!-- article content goes here -->
  </li>
</ul>

For more information, check out: https://v2.vuejs.org/v2/guide/list.html#key

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing my video from filling the entire screen?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d ...

javascripthtmlcsssass

Implementing a Unique Approach to Showcase the Initial PDF Page as Cover through Django and JS

I would like to enhance my script so that when a user hovers over an object on the template, a PDF cover page can be set for each object. Current process: Currently, I am able to upload files in the .pdf and .epub formats for each object with additional ...

javascriptjqueryajaxpdfpdf.js

experiencing difficulty with a background image that is failing to display

I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...

javascripthtmlcss

Show Zeroes in Front of Input Numbers

I am working with two input fields that represent hours and minutes separately. <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes"> This se ...

javascriptjqueryhtmlcss

The content of xmlhttp.responseText is not being displayed in the innerHTML

As part of my ongoing effort to enhance my understanding of Ajax for work purposes, I have been following the W3Schools tutorial and experimenting with my Apache2 server. In this process, I have placed a file named ajax_info.txt on the server (in /var/www ...

javascriptajaxdominnerhtml

Adjust the height of a div using jQuery animate based on the amount of text within

I have created a basic animation feature where users can click on an expanding box. I am looking for a solution that does not involve using a plugin. Currently, the code looks like this: $('#one').css("height", "22"); $('#t1').cli ...

javascriptjqueryhtmlcss

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

Inspecting the final element of my jQuery slider

I've been working on a jQuery slider where I add the class "currentmemory" to each child of my memory2container to show which slider is displayed. The issue arises when I reach the last slider; instead of looping back to the first one and starting ov ...

javascriptjqueryslider

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

Discovering the method to incorporate a data-icon attribute within select options using vue.js

UPDATE before modification dataIcon: " @/images/flag-ukraine.svg" after modification dataIcon: require("@/assets/svg/flag-ukraine.svg"), notable change with require() I am using Materialize CSS select. When I use a URL for dataIcon ...

javascriptvue.jsmaterialize

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

Loading content synchronously

Could you assist me in finding a solution to synchronize the loading of pages and elements? Currently, my code looks like this: $(Element).load(File); ... other commands... window.onload = function () { Update_Elements(Class, Content); } Everything ...

javascriptjquery

Utilizing nested routes in Node.js with express.js framework!

index.js const AuthRouter = require("./Routes/Auth/signup") app.use("/account", AuthRouter) signup.js router.post("/", async (req, res) => { res.send("Signup") }) It's functioning correctly... H ...

javascriptnode.jsexpressexpress-router

Angular error: Attempting to reduce an empty array without an initial value

I am encountering an issue with my array being filtered and reduced. getPageComponents(title: string) { this.pageComponents = []; const pageBlock = this.pageComponents.filter((val) => { if (val.page_title === title) { retur ...

javascriptarraysangulartypescript

Masonry.js is working perfectly in Firefox, however, it is experiencing compatibility issues with Chrome and

Recently, I encountered a strange issue with Dessandro's Masonry.js library. It was working perfectly fine until it suddenly stopped functioning in Safari and Chrome (I haven't tested it on IE yet), while still working flawlessly in Firefox. Usua ...

javascriptcross-browsercoffeescriptjquery-masonry

The combination of Vue init and Firebase init led to the creation of intricately nested

My project journey began with Vue CLI, generating the usual package.json, setting up node_modules, and so on. Next, I initiated a Firebase project in the same directory using firebase init, opting for functions. This action birthed a new folder called fun ...

firebasevue.jsnpmwebpackvue-cli

Have developers created an event trigger for when google maps controls finish loading?

While I am aware of the tilesloaded event, it appears that the controls load after this event. My goal is to use jQuery to retrieve the controls, but I am struggling to identify the appropriate event to listen for. ...

javascriptgoogle-mapsgoogle-maps-api-3

Handling HTTP calls in Vue.js before the beforeunload event

I am facing an issue with the beforeunload event in my Vue.js application. I have a scenario where I need to make an HTTP call to check if the user is still logged in or if their session has expired on the backend. However, it seems that the event does no ...

vue.jsvuejs2

Error encountered in NextJS: Trying to call res.unstable_revalidate which is not a function

I recently tried out a cutting-edge feature introduced in NextJS v.12.1 . The API itself is functioning correctly and can be accessed. However, I encountered a 500 error with the message res.unstable_revalidate is not a function. This issue persisted wheth ...

javascriptnode.jsreactjsservernext.js

Anticipating the completion of a process.nextTick cycle

Problem Statement I am currently working on a Node.js application that involves complex calculations and utilizes recursive algorithms. The code snippet below gives a brief overview of how the calculations are performed: // routes.js - express.js routes ...

javascriptnode.jsrecursionstack-overflowevent-loop