Same data processing in vue array

Like ng, when there is the same data in vue's array, it will report Uncaught (in promise) TypeError

E.g:

<li v-for="item in items">
           {
   
   {item.message}}
        </li>

 data:{
            items:[
                { message: 'Foo' },
                { message: 'Bar' },
                { message: 'Foo' },
                { message: 'Bar' },
                { message: 'Foo' },
                { message: 'Bar' }
            ],

In this case, an error will be reported, thinking that the items array has the same data, the solution is similar to ng, ng is track by $index, vue is track-by="$index"

<li v-for="item in items" track-by="$index">
           {
   
   {item.message}}
        </li>

If you don't have a unique key to track, you can use track-by="$index", which forces v-for to go into in-place update mode: the segment is not moved, but simply refreshed with the new value of the corresponding index. This mode can handle repeated values ​​in the data array


Note: This article is only some experience in my learning process. If you have any questions, please leave a message to exchange


I hope my experience of entering the pit is helpful to you, may the Holy Light be with you

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324351111&siteId=291194637