老师 我是真没明白，为什么我这个点击“编辑”，数据没有到添加用户哪一列中
来源：4-4 编辑用户--显示用户信息
星辰很精彩
2022-10-17 20:29:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/vue.js"></script>
</head>
<body>
<div id="container">
<!-- 头部区域 -->
<div class="header">
<span class="fl">后台管理系统</span>
<ul class="fr">
<li><a href="javascript:;"><i class="iconfont icon-yonghu1"></i>个人中心</a></li>
<li><a href="javascript:;"><i class="iconfont icon-tuichu"></i>退出</a></li>
</ul>
</div>
<!-- 侧边栏 -->
<div class="aside">
<div>
<img class="avatar" src="./images/avatar.jpg">
<h3 class="name">赖帅</h3>
</div>
<ul class="nav">
<li>
<a href="#">
<i class="iconfont icon-tongji2x"></i>数据统计
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-ai-article"></i>文章管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-lanmuguanli"></i>栏目管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-pinglun"></i>评论管理
</a>
</li>
<li class="active">
<a href="#">
<i class="iconfont icon-yonghu"></i>用户管理
</a>
</li>
<li>
<a href="#">
<i class="iconfont icon-shezhi"></i>系统设置
</a>
</li>
</ul>
</div>
<!-- 内容区 -->
<div class="main">
<div class="title">
<h1>用户管理</h1>
</div>
<div class="form fl">
<form>
<h3>添加新用户</h3>
<div class="form-group">
<label>姓名</label>
<input class="form-control" type="text" v-model="user.name" >
</div>
<div class="form-group">
<label>昵称</label>
<input class="form-control" type="text" v-model="user.nickname">
</div>
<div class="form-group">
<label>性别</label>
<input class="form-control" type="text" v-model="user.gender">
</div>
<div class="form-group">
<button class="btn-primary" type="button" @click="add">确定</button>
</div>
</form>
</div>
<div class="table fl">
<table width="600">
<caption>
<h3>用户列表</h3>
</caption>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>id</th>
<th>姓名</th>
<th>昵称</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td class="td-center"><input type="checkbox"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.nickname}}</td>
<td>{{item.gender}}</td>
<td>
<a @click="edit(item.id)" href="javascript:;" class="btn btn-edit"
style="margin-right: 8px;">编辑</a>
<a @click="del(item.id)" href="javascript:;" class="btn btn-delete">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="./js/users.js"></script>
</body>
</html>// 1.将数据添加到tr中1
// 将reactive在Vue中解构出来
const { reactive } = Vue;
const list = reactive([
{ id: 1, name: 'Lux', nickname: '光辉女郎', gender: '女' },
{ id: 2, name: 'Jax', nickname: '武器大师', gender: '男' },
{ id: 3, name: 'Ashe', nickname: '寒冰射手', gender: '女' },
{ id: 4, name: 'VN', nickname: '暗夜猎手', gender: '女' },
{ id: 5, name: 'Raze', nickname: '符文法师', gender: '男' }
]);
// 删除功能
function del(id) {
if (confirm("是否进行删除操作？")) {
// 返回满足条件的条件索引
let index = list.findIndex(item => item.id == id);
// splice 两个参数 1.开始的数据索引 2.要删除的数据条数
list.splice(index, 1);
}
}
const user = ({
id: '',
name: '',
nickname: '',
gender: ''
}
)
// 编辑用户->显示用户信息
// 根据id号找到数据
function edit(id) {
// 找到满足条件的数据
let tmp = list.find(item => item.id == id);
console.log(tmp);
user.id = tmp.id;
user.name = tmp.name;
user.nickname = tmp.nickname;
user.gender = tmp.gender;
}
// 添加用户
function add() {
if (user.name.trim().length == 0) {
alert("注意名字不能为空");
return;
}
if (user.nickname.trim().length == 0) {
alert("注意昵称不能为空");
return;
}
if (user.gender != "男" && user.gender != "女") {
alert("性别只能填男和女");
return;
}
list.push({
id: (list.length - 1).id + 1,
name: user.name,
nickname: user.nickname,
gender: user.gender
})
// 清空表单
user.name = "";
user.nickname = "";
user.gender = "";
}
const app = {
setup() {
return { list, del, add, user, edit }
}
}
Vue.createApp(app).mount(".main");写回答
1回答
-
好帮手慕小尤
2022-10-18
同学你好，建议同学声明user对象时添加reactive，如下所示：然后重新测试代码试一下。
注：reactive 是 Vue3 中提供的实现响应式数据的方法。
祝学习愉快！
0
相似问题