求解增删改，是什么问题致使运行不了？
求解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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
height: 400px;
width: 500px;
border: 1px solid black;
}
</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 v-for="(list, i) in lists" :key="i">
<td>{{i+1}}</td>
<td>{{list.name}}</td>
<td>{{list.age}}</td>
<td>{{list.addr}}</td>
<td>
<button @click="setDate('update', list)">编辑</button>
<button @click="confirmDelete(list)">删除</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" v-model="obj.name" placeholder="请输入姓名" /><br>
<input type="text" v-model="obj.age" placeholder="请输入年龄" /><br>
<input type="text" v-model="obj.addr" placeholder="请输入家庭地址" /><br>
</div>
<button @click="submit()">确定</button>
<button @click="cancel()">取消</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var va = new Vue({
el: '#app',
data: {
flag: false, //弹框的显示与隐藏
state: 'add',
obj: {
name: '',
age: '',
addr: '',
},
lists: [{
id: 1,
name: '邢晗铭',
age: 22,
addr: '浙江台州'
},
{
id: 2,
name: '邢晗铭',
age: 22,
addr: '浙江台州'
}
],
deleteItem: null
},
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, id: id });
} else {
this.lists.forEach((item, i) => {
if (item.id == this.obj.id)
this.lists[i] = this.obj;
});
}
},
cancel() {
this.flag = false;
},
confirmDelete(list) {
this.deleteItem = list;
},
deleteItemConfirm() {
if (this.deleteItem) {
const index = this.lists.findIndex(item => item.id === this.deleteItem.id);
if (index > -1) {
this.lists.splice(index, 1);
}
this.deleteItem = null;
}
}
}
})
</script>
</body>
</html>
1，你没有使用v-model来绑定inpit的值
2. 你lists中的每一项没有id，Math.max(...list.map(item=>item.id))+1会造成NaN报错
<input type="text" name="name" id="name" placeholder="请输入姓名---" v-model="obj.name"/></br>
<input type="text" name="age" id="age" placeholder="请输入年龄---" v-model="obj.age"/></br>
<input type="text" name="addr" id="addr" placeholder="请输入家庭地址---" v-model="obj.addr"/></br>
lists:[
{
id: 0,
name:'邢晗铭',
age:22,
addr:'浙江台州'
},
{
id:1,
name:'邢晗铭',
age:22,
addr:'浙江台州'
}
]
this.lists.push({...this.obj,id:id});
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7424224
- 这篇博客也不错, 你可以看下解决vue双向绑定带来的问题
- 除此之外, 这篇博客: 【vue项目】 保存代码，单引号变双引号行尾加分号中的 问题： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
vue项目中，当保存代码时，js文件中的单引号自动变成双引号，并且自动添加分号，逗号。
- 您还可以看一下 耿职老师的VUE开发旅游攻略移动端，零基础到实战，短信验证码，登录，注册课程中的 课程简介及成果展示小节, 巩固相关知识点