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>