Report Duplicate keys detected: ‘0’. This may cause an update error in VUE and the solution

vue version: 2.x

First, Duplicate keys detected: ‘0’. This may cause an update error is an error caused by Vue finding that the key is not unique.

Translated into Chinese is probably: Duplicate key detected: ‘0’. ‘0’ may cause an update error.

There are also some other solutions found on the Internet. It is solved by manual modification :key, such as concatenating strings. Because in order to solve the problem, the data is manually modified. Personally, it should not be like this.

The last problem I found: On the same layer of DOM node, vue found that the key is not unique. It will report an error. But if you are not using the v-for loop in the same layer of DOM, you will not report an error. So, if it is not in the same layer of DOM The for loop on the above can ensure the uniqueness of the key. (The role of the key has not been touched yet.)

And the solution:

What I think of is to add an extra layer of html tags, but this will create more non-semantic tags, just to ensure the uniqueness of the key and add tags, but I prefer to do this instead of manually splicing strings.

Or manual splicing recommended on the Internet. But: the key is manually modified. If you forget: the key data is different from the original data. It is not so convenient to maintain in the later stage.

Sample Code

    < script  type = "text/javascript"  src = "./vue_localtion/vue.js" > </ script >
</ head >

< body >
    < div  id = "app" >
        < p  v-for = '(item,index) in cyclicData'  :key = 'index' > {{item}} </ p >
        < hr >
        < div > <!--If you remove this layer of div, an error will be reported. Because on the same layer of DOM node: the value of the key is repeated -->
            < p  v-for = '(item,index) in sortCyclicData'  :key = 'index' > {{item}} </ p >
        </ div >
    </ div >

    < script >
        let app = new Vue({
            el : '#app' ,
            data : {
                cyclicData : [ 1 , 8 , 3 , 7 , 5 , 6 ],
            },
            computed : {
                sortCyclicData : function () {
                    return  this .cyclicData.sort( function ( num1, num2 ) {
                        return num1-num2;
                    })
                }
            },
        })
    </ script >

ProgrammerAH

Programmer Guide, Tips and Tutorial

Report Duplicate keys detected: ‘0’. This may cause an update error in VUE and the solution

Read More:

Leave a Reply Cancel reply