Troubleshooting transition-group issues when displaying a list post submission

I'm facing an issue with updating a list after submitting a form using vue transition-group.

Everything works fine when I use a simple "ul" tag, but when I try to implement the transition using transition group, I encounter an error in the console.

"Children must be keyed with :li."

<transition-group name="list-complete" tag="ul" class="list">
  <li class="item list-complete-item " v-for="contact in contacts" v-bind:key="contact.id">
    <div class="item__desc">
      <p class="paragraph">
        <span class="bold">{{contact.name}}</span>
      </p>
      <p class="paragraph">
        <span class="bold">Mail:</span>
        {{contact.email}}
      </p>
      <p class="paragraph">
        <span class="bold">Street:</span>
        {{contact.address.street}}
      </p>
      <p class="paragraph">
        <span class="bold">City:</span>
        {{contact.address.city}}
      </p>
    </div>
   </li>

Answer №1

Make sure to associate your key with distinctive data such as index in the following way :

  <li class="item list-complete-item " v-for="(contact,index) in contacts" v-bind:key="index">

As specified in the official documentation :

  • Usage:

<transition-group> functions as transition effects for multiple elements/components. The <transition-group> creates an actual HTML element. By default, it generates a <span>, and you have the option to specify which element it should create using the tag attribute.

Remember that each child within a <transition-group> needs to have a unique key for the animations to function correctly.

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

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

It seems that there are plenty of guides available on converting a file from .js to .d.ts, but not the other way around. Specifically, I have some code in .d.ts format and I would like to convert it into JavaScript. Can anyone offer assistance with this t ...

Error: The function utils.requestSendSMSPermission is not defined

One of the functions in my project is called requestSendSMSPermission and it resides in the PermissionManager located within the utils directory. The code snippet for PermissionManager.js is as follows: module.export = { requestSendSMSPermission: async ...

Transmit JSON information using jQuery

Can you explain why the code below is sending data as City=Moscow&Age=25 instead of in JSON format? var arr = {City:'Moscow', Age:25}; $.ajax( { url: "Ajax.ashx", type: "POST", data: arr, dataType: 'js ...

Minifying Angular using grunt leads to 'Error initializing module' issue

Currently, I have multiple controllers, models, and services set up as individual files for preparation before minification. My goal is to combine and minify all these files into one JS file for production. To illustrate how my files are structured, here ...

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

Are there colons present in the JSON data object responses?

I'm working with a JSON response that has the following structure: items |___ [0] |____ media:group |______media:thumbnail |_______ [0] |_ ...

What is the best way to retrieve information from a form that is coded within inner HTML?

I need to extract data from the text fields in my code. How can I do that? Here is my JavaScript function that adds a new form every time the add button is clicked: function elementAppender() { if (count <= 5) { let element = docum ...

What is the best way to initiate a local Node.js server specifically when launching a desktop Electron application?

I am looking to ensure that my node js server runs while my electron app is open. One method I have attempted is using the child_process module to execute a shell command as shown below: const {exec} = require('child_process') const startDBServ ...

How to retrieve the values of a property from a JavaScript object

Looking for a fresh perspective on this issue. I'm currently retrieving historical data from the cryptocompare API, but I'm having trouble accessing the received values. https://i.sstatic.net/oH6hz.png When I hardcode it as res.data.OMG.USD, I ...

Is it possible to retrieve the JSON object from the Fetch API response and access it externally?

Currently, I am facing an issue accessing the variable emoji_map beyond the scope of the then function in my code and I'm unsure how to resolve it. Below is the relevant snippet of my code: if (req) { fetch(req).then(function(response) { ...

Tips for locating the index of an object within an array by validating property values in JavaScript

My array looks like this: $scope.myArray = [{ columnName: "processed1", dataType: "char" }, { columnName: "processed2", dataType: "char" }, { columnName: "processed3", dataType: "char" }]; I'm trying to locate the index of an object wher ...

How can I retrieve the transformation matrix for a DOM element?

Is there a way to retrieve the transformation matrix of a DOM element similar to how we can do it with canvas context? Does the DOM provide a getTransform() method for this purpose? ...

The dynamic alteration of BackgroundImage does not appear to be functioning correctly with tailwind and nextjs

Introduction While working on my weather application using nextJS and TailwindCSS, I encountered a UI issue towards the end of development. Unfortunately, I couldn't resolve this problem alone. My main concern is changing the background image dynami ...

Access a factory from a separate module in AngularJS

Chapter 1: angular.module('chapter1', []) .factory('chapter1Fac', function(){ return { display: function (){ return('This message is from chapter 1'); } }; }; Chapter 2 ...

Achieve text length that does not exceed the specified limit dynamically

Is it possible to determine the length of the visible portion of text that overflows (or calculate the size of the overflow for further processing) using CSS or JavaScript? If so, can this calculation be done dynamically (such as on window resize)? The g ...

Tips for disabling the default behavior by using preventDefault in JavaScript

I need help with removing the preventDefault() function and submitting the form in the else condition of my code. Does anyone know how to achieve this? if(email.val() != ""){ //check email e.preventDefault(); $.ajax({ ...

Initiate monitoring for child component modifications

I'm looking to disable 'changeDetection' for the parent component while enabling it for the child component. Can you provide an example of how this can be achieved? The parent component contains static data, meaning change detection is not ...

Top tips for efficiently transmitting an array using AJAX

When dealing with checkboxes that need to be sent as an array to the server, I usually have a list of these checkboxes and send them through an array[]. For instance, when submitting the following: <input type="checkbox" class="linkStyle" name="style[ ...

Execute function when image finishes loading (Internet Explorer)

Is there a way to execute a method once an image is completely loaded, considering that the .load function doesn't work for images in Internet Explorer? Below is the code snippet in question: <img ref="image" :src="src" :alt="alt" @load=" ...

React Query: obtaining the status of a query

In the realm of React Query, lies a valuable hook known as useIsFetching. This hook serves the purpose of indicating whether a particular query is presently fetching data. An example of its usage can be seen below: const queryCount = useIsFetching(['m ...