用vue写了一个小功能，当点击确定按钮，为什么新添加的记录中的编号总是重复呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
table{
border-collapse: collapse;
}
</style>
<body>
<div id="app">
<add @myadd="addUser"></add>
<table border="1">
<tr>
<th>选择</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>分数</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) of list" :key="item.id">
<td><input type="checkbox" name="" :checked="item.checked" @click="handleCheck(index)"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.score}}</td>
<td><button @click="deleteItem(index)">删除</button></td>
</tr>
</table>
<button @click="allDelete">全部删除</button>
</div>
<template id="myForm">
<form>
<div>
name:<input type="text" v-model="userInfo.name"name="">
</div>
<div>
age:<input type="text" v-model="userInfo.age" name="">
</div>
<div>
gender:
<input type="radio" checked value="男" v-model="userInfo.sex">男
<input type="radio" value="女" v-model="userInfo.sex">女
</div>
<div>
score:<input type="text" name="" v-model="userInfo.score">
</div>
<button @click="handleAdd">确定</button>
</form>
</template>
<script type="text/javascript">
//添加用户的表单
Vue.component("add",{
template:`#myForm`,
data:function(){
return{
userInfo:{}
}
},
methods:{
//添加用户
handleAdd(e){
this.$emit("myadd",this.userInfo)
e.preventDefault();
}
},
})
var app=new Vue({
el:"#app",
data:{
list:[
{checked:false,id:1,name:"张三",age:21,sex:'男',score:78},
{checked:false,id:2,name:"张三",age:25,sex:'男',score:79},
{checked:false,id:3,name:"张三",age:27,sex:'男',score:83}
],
user:{}
},
methods:{
//添加用户
addUser(userInfo){
this.user=userInfo;
// this.newUser.id=this.list.length+1;
this.user.id=this.list.length+1;
this.list.push(this.user)
},
//选中与取消选中
handleCheck(index){
this.list[index].checked=!this.list[index].checked
},
//删除一项
deleteItem(index){
console.log(this.list[index].checked)
if(this.list[index].checked){
this.list.splice(index,1)
return;
}else{
alert("请选中人员")
}
},
//删除所有
allDelete(){
this.list=this.list.filter((item,index)=>{
return item.checked==false
})
}
}
})
</script>
</body>
</html>
