<template>
<div class="about">
<div>
<input type="text" placeholder="留言人" v-model="obj.name" />
<input type="text" placeholder="内容" v-model="obj.con" />
<input type="date" v-model="obj.time" />
<button @click="add">添加</button>
</div>
<table border="1">
<tr v-for="(item,index) in infos" :key="index">
<!-- index是下标，获取索引的值 索引是从0 开始的所以加一 -->
<td>{{index+1}}{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.con}}</td>
<td>{{item.time}}</td>
<td>
<button @click="edit(item)">编辑</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</table>
<div v-show="flag">
<!-- v-show 显示隐藏 单纯的添加样式 v-if 销毁整个dom -->
<label for>姓名</label>
<input type="text" v-model="editdetail.name" />
<br />
<label for>内容</label>
<input type="text" v-model="editdetail.con" />
<br />
<label for>时间</label>
<input type="text" v-model="editdetail.time" />
<br />
<button @click="change()">更新</button>
<button @click="flag=false">取消</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flag: false, //弹窗的显示隐藏
editdetail: {},
obj: {
name: "",
con: "",
time: "",
},
infos: [{ name: "张三", con: "吃饭了吗", time: "2020-06-14", id: 1 }]
};
},
methods: {
//增
add() {
// 必填项和非必填 判断
//获取id 连接数据库，方法接收点击事件传过来的id
if (!this.obj.name || !this.obj.con || !this.obj.time) return;
var _id = Math.max( ...this.infos.map(function(v) {
return v.id;
})
) + 1;
//追加 v-model配合双向绑定
this.infos.push({
name: this.obj.name,
con: this.obj.con,
time: this.obj.time,
id: _id
});
//id自动递增 获取索引 新东西
// 清空input的值 校验处理
this.obj = {};
// (this.obj.name = ""), (this.obj.con = ""), (this.obj.time = "");
},
//删除组件，必须获取对应的下标索引
del(index) {
this.infos.splice(index, 1); //三个值 index从哪里才是 1删除一条数据
},
//编辑组件 查 item 循环对应的每一个值 与他内容一一对应
edit(item) {
//就是显示弹层
// this.editdetail = item;//对象赋值是引用关系
this.flag = true; //弹层
// 为了防止连动，对象赋值是引用关系，原有发生变化是她会随着变化
// 解决办法
this.editdetail = {
name: item.name,
con: item.con,
time: item.time, //重新指向
id: item.id
};
//更新 生拷贝
},
//改
change() {
//数据更新
for (var i = 0; i < this.infos.length; i++) {
if (this.infos[i].id == this.editdetail.id) {
this.infos[i] = this.editdetail;
console.log(this.infos[i].id);
console.log(this.editdetail);
this.flag = false; //弹窗
}
}
}
}
};
</script>
<style >
td {
400px;
}
/*
Map() 循环遍历 有返回值
forEach() 无返回值
...扩展运算符es6 对当前数组进行序列化 就是拿到数组的结果
var _id=Math.max(...this.infos.map(function(item){
return item.id 循环拿到对应的id值
}))+1;
*/
</style>