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>