v-for the key

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .userList {
                border: 1px solid red;
                margin: 20px 0;
                padding: 10px 10px;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script src="lodash.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-com', {
                template: `
                     <div class = 'userList'>
                        <div class =  ' Content ' > 
                            < H3 > {} {} obj.name < / H3> 
                            < P > {} {} obj.content < / P> 
                        < / div> 
                        < div class = ' Control ' > 
                            < INPUT type = " text " placeholder =  ' Please enter your name '  / > 
                        < / div> 
                    < / div> 
                `, 
                props:{
                    obj: Object
                } 
            }) 


             ,Var the App = { 
                Data () { 
                    return { 
                        DATAS: [{ 
                                ID: . 1 , 
                                name: ' John Doe ' , 
                                Content: ' I am John Doe ' 
                            }, 
                            { 
                                ID: 2 , 
                                name: ' John Doe ' 
                                Content : ' I am John Doe ' 
                            }, 
                            { 
                                ID: . 3 , 
                                name: ' Wang Wu ' , 
                                Content: ' I Wang Wu ' 
                            } 
                        ] 
                    } 
                }, 
                Template: ` 
                    < div >     
                        < Button @click =  ' Change ' > changing the order of < / Button> 
                        < My-com v-for = '(item,index) in datas' :obj = 'item' :key = 'item.id'></my-com>
                    </div>
                `,
                methods: {
                    change() {
                        console.log(1);
                        this.datas = _.shuffle(this.datas);
                    }
                }
            };

            new Vue({
                el: '#app',
                components: {
                    App
                },
                template: `<App />`
            });
        </script>
    </body>
</html>
Guess you like
