Detailed explanation of the solution to throwing errors using v-for statement in Vue

Solution to throw errors using v-for statement in Vue

Today, when I was maintaining my previous project, I encountered the following error report. At first, I thought it was because jQuery and Vue conflicted, so I changed the previous jQuery, but the same error still occurred... After checking the information, I found that the values ​​in the loop variables were repeated, resulting in Vue error report.

Next, I checked the solution and found that versions before Vue 2.0 can be solved by adding the following statement after the v-for statement:

<div v-for="item in items" track-by="id">

However, in the version after Vue 2.0, track-by is changed to key, so for the version after Vue 2.0, you can use:

<div v-for="item in items" v-bind:key="">

In fact, after checking the JSON data returned by the API, I found that the interface was requested repeatedly, so this problem should not have occurred. So I specially added a filtering method to the interface where the data is retrieved:

(arr) === -1 ? (arr) : undefined

This sentence means that if the obtained array element is not repeated, the array element will be added to the list.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.