项目四:后台用户管理系统(四):实现用户添加功能时遇到的问题
好家伙,
在实现“添加用户”这个功能的时候,遇到了许多问题
在MyUsers.vue组件中,(就不展开了)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <!-- 标题 --> <h4 class="text-center">用户管理</h4> <!-- 用户列表 --> <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> <th>头衔</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in userlist" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.position}}</td> <td> <a href="" @click.prevent="gotoDetail(item.id)">详情</a> </td> </tr> </tbody> </table> <button @click="addUser">添加用户</button> </div> </template> <script> import bus from "../user/eventbus" export default { name: 'MyUser', data() { return { // 用户列表数据 userlist: [ { id: 1, name: '胖虎', age: 20, position: '程序员' }, { id: 2, name: '蔡宇', age: 18, position: '大叔' }, ], name:"", age:"" } }, methods: { gotoDetail(id) { this.$router.push('/home/detail/'+id) }, addUser(){ this.$router.push('/home/addUser') } }, created(){ //2.为bus绑定自定义事件,(绑定事件) bus.$on('share',(val,vall)=>{ console.log("Left组件传过来的值为:",val,vall) this.name=val; this.password=vall; this.userlist.push({id:3,name:val,age:vall,position:vall}); this.userlist.push({id:4,name:val,age:vall,position:vall}); console.log(this.userlist) }) //将收到的val值打印并且将val的值赋给组件的参数 }, beforeMount(){ // this.userlist.push({id:3,name:this.name,age:this.name,position:this.name}); }, mounted(){ this.userlist.push({id:3,name:this.name,age:this.name,position:this.name}); }, beforeUpdate(){ } } </script> <style lang="less" scoped></style>
在组件AddUser.vue中,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <h2>用户:</h2> <input type="" v-model="name"> <h2>密码:</h2> <input type="" v-model="password"> <button @click="send">创建新用户</button> <button @click="addUserr">拿数据</button> </div> </template> <script> import bus from "./eventbus.js" export default { data(){ return{ name:"", password:"", } }, methods:{ addUser(){ }, addUserr(){ console.log(this.name+" "+this.password) }, send(){ bus.$emit('share',this.name,this.password) alert("传值成功",this.name,this.password) this.$router.push('/home/Users') } } } </script>
两组件为兄弟组件关系
我使用的兄弟组件传值方案为eventbus(技术有限,只能用这个)
来看看这个代码:
created(){
//2.为bus绑定自定义事件,(绑定事件)
bus.$on('share',(val,vall)=>{
console.log("Left组件传过来的值为:",val,vall)
this.name=val;
this.password=vall;
this.userlist.push({id:3,name:val,age:vall,position:vall});
console.log(this.userlist)
})
//将收到的val值打印并且将val的值赋给组件的参数
},
在实现“添加用户”这个功能的时候,遇到了许多问题
我理所当然在created方法中,进行了数组的push方法
然后,结果当然是,寄.
来看看控制台吧
可以看出来
组件传值成功了,数组添加方法也成功了,
那么大概率是视图的问题了
换个生命周期钩子试试
created(){
//2.为bus绑定自定义事件,(绑定事件)
bus.$on('share',(val)=>{
this.user=val;
this.userlist.push(this.user);
this.$forceUpdate();
this.__watchers.userlist.dirty=true
console.log(this.userlist)
})
//将收到的val值打印并且将val的值赋给组件的参数
},
// // beforeMount(){
// // this.userlist.push(this.user);
// // },
// mounted(){
// // if(this.a=2){
// // this.userlist.push(this.user);
// // }
// },
// beforeUpdate(){
// // this.userlist.push(this.user);
// },
// updated(){
// // this.userlist.push(this.user);
// }
把每个钩子都试一遍
麻了,用beforemount钩子,有id没数据
依旧寄
在咨询大佬后
尝试另辟蹊径
this.$forceUpdate();
this.__watchers.userlist.dirty=true
还是寄
暂未解决,待续