求解vue增删改，是什么问题致使运行不了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
height: 400px;
width: 500px;
border: 1px solid black;
}
</style>
</style>
</head>
<body>
<div id="app">
<button @click="setDate('add',null)">添加</button>
<div class="title">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--<tr>
<td>01</td>
<td>邢晗铭</td>
<td>22</td>
<td>浙江台州</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>-->
<tr v-for="(list,i) in lists":key="list.id">
<td>{{i+1}}--{{list.id}}</td>
<td>{{list.name}}</td>
<td>{{list.age}}</td>
<td>{{list.addr}}</td>
<td>
<button @click="setDate('update',lists)">编辑</button>
<button @click="del(list,i)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" v-show="flag">
<div class="box-top">
{{state=='add'?'添加':'编辑'}}
</div>
<div class="box-one">
<input type="text" name="name" id="name" placeholder="请输入姓名---" /></br>
<input type="text" name="age" id="age" placeholder="请输入年龄---" /></br>
<input type="text" name="addr" id="addr" placeholder="请输入家庭地址---" /></br>
</div>
<button @click="submit()">确定</button>
<button @click="flag=false">取消</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
var va = new Vue({
el: '#app',
data: {
flag: false, //弹框的显示与隐藏
state:'add',
obj:{
name:'',
age:'',
addr:'',
}
lists:[
{
name:'邢晗铭',
age:22,
addr:'浙江台州'
},
{
name:'邢晗铭',
age:22,
addr:'浙江台州'
}
],
},
methods:{
setDate(type,v){
this.state=type;//改变添加或编辑状态
this.flag=true;//弹框显示
if (this.state=='add') {//清空数据
this.obj={}
} else{
this.obj={...v};//浅拷贝
}
},
submit(){//数据提交
this.flag=false;//弹框隐藏
if (this.state=='add') {//添加
var id=this.lists.length>0?Math.max(...this.lists.map(item=>item.id))+1:1;
this.lists.push({...this.obj.obj,id:id});
} else{//编辑
this.lists.forEach((item,i)=>{
if(item.id==this.obj.id)
this.list[i]=this.obj;
})
}
},
del(list.i){//删除
this.lists=this.lists.filter(v=>v.id!=list.id)
}
}
})
</script>
</body>
</html>
