Vue数组遍历时出现:Duplicate keys detected: ‘0‘的解决方案

数组遍历的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
       
    </style>
</head>

<body>

    <div id="app">
   
        <!-- 数组的遍历 -->
            <div>
                <div v-for="(item,index) in arr" :key="index">
                    {{index}} ---- {{item}} 
                </div>
            </div>
                
            <!-- 会产生这样的错误 Duplicate keys detected: '0'. This may cause an update error. -->
            <!-- 解决方案:在外面的一层增加一个div -->
      
        
    </div>


    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



    <script>
        const app1  = new Vue({
            el:'#app',
            data:{
                num:2,
                str:'shjakhsjkajk',
                arr:['haha','1','233'],
                obj:{
                    width:'100px',
                    height:'200px'
                }
            },
            methods:{
                
            }

        })
    </script>
</body>

</html>

版权声明:本文为y1314999原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。