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

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

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

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

 1 <template>
 2     <view>
 3         <view v-for="stu in studentArry" :key="stu.id">     <!--:key 保证组件和数据捆绑唯一 -->
 4             <label class="checkbox">
 5                 <checkbox :value="stu.name" /> {{ stu.name }}
 6             </label>
 7         </view>
 8         
 9         <button type="primary" @click="addStu">新增学生</button>
10     </view>
11 </template>
12 
13 <script>
14     export default {
15         data() {
16             return {
17                 studentArry: [
18                             {
19                                 id:1,
20                                 name: '小明',
21                                 age: 18,
22                             },
23                             {
24                                 id:2,
25                                 name: '小红',
26                                 age: 19,
27                             },
28                             {
29                                 id:3,
30                                 name: '小李',
31                                 age: 17,
32                             }
33                         ]
34                     }
35                 },
36         methods: {
37             addStu() { 
38                 // 第一步: 获得这个数组
39                 var studentArry = this.studentArry;
40                 // 第二步: 获得id
41                 var newId = studentArry.length + 1;
42                 var newStu = {
43                     id: newId,
44                     name: "新生" + newId,
45                     age: 18
46                 }
47                 
48                 // studentArry.push(newStu);
49                 studentArry.unshift(newStu);
50             } 
51         }
52     }
53 </script>
54 
55 <style>
56 
57 </style>