uni-app v-for数据的绑定唯一

uni-app v-for数据的绑定唯一

  这个其实Vue里我已经写了， 比这个全，不过既然讲到了就有打了一遍

  中间出了一个错误， 搞了老半天， 结果重启一下就好了， 浪费了好多时间， 坑！

<template>
    <view>
        <view v-for="stu in studentArry" :key="stu.id">     <!--:key 保证组件和数据捆绑唯一 -->
            <label class="checkbox">
                <checkbox :value="stu.name" /> {{ stu.name }}
            </label>
        </view>
        
        <button type="primary" @click="addStu">新增学生</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                studentArry: [
                            {
                                id:1,
                                name: '小明',
                                age: 18,
                            },
                            {
                                id:2,
                                name: '小红',
                                age: 19,
                            },
                            {
                                id:3,
                                name: '小李',
                                age: 17,
                            }
                        ]
                    }
                },
        methods: {
            addStu() { 
                // 第一步: 获得这个数组
                var studentArry = this.studentArry;
                // 第二步: 获得id
                var newId = studentArry.length + 1;
                var newStu = {
                    id: newId,
                    name: "新生" + newId,
                    age: 18
                }
                
                // studentArry.push(newStu);
                studentArry.unshift(newStu);
            } 
        }
    }
</script>

<style>

</style>