vue开发过程中数组新push一个对象,其他对象同时被修改

		this.targetData.push(item)
		
		原因:vue开发数组push一条对象而导致之前push进去的对象也变成后面进去对象的值,百度发现原因是对象
	是引用类型,传递的是引用地址,所以两个数组引用的是同一个对象,只要其中一个数组改变,就会导
	致对象改变,进而另一个引用的数组也会改。
	
		解决方法:将需要放入数组的对象先深拷贝一份,用拷贝的对象,这样就不存在引用关系了。
	
	1. 拷贝方式一:Object.assign({},需要拷贝的对象)
		eg:const target = { x: 1 };
			const content1= { m: 2 };
			const content2= { l: 3 };
			Object.assign(target,content1,content2);
			Object.assign方法中第一个参数是目标对象,之后的参数全都是源对象。
			结果:target // {x:1, m:2, l:3}
			
	   拷贝方式二:JSON.parse(JSON.stringify(需要拷贝的对象)) 
	   	eg:this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))
	   	
	2. 重新申请一个内存空间,然后赋值给他,再push,实现深拷贝
        eg:let obj={                        
            id: this.randomArr(200, 0, 500),                        
            key: this.originalCheckedData[index].key,                       
            label: this.originalCheckedData[index].label,                   
        }                   
        this.targetData.push(obj)    

在使用vue框架开发时,遇到一个数组push一条对象而导致之前push进去的对象也变成后面进去对象的值。后来发现是因为push对象时,指针一直指向的是之前输入框绑定的对象地址,所以输入框下次输入时值改变,数组内的值也就变了。

	remark_formInline: {
        name: '',
        type: 'IT反馈',
        creator: 'admin',
        time: '' ,
        account:''
        }
	this.remark_datas.push(this.remark_formInline);
	//按上面这种写法直接push进去,数组内的值会跟着变化。


需要重新申请一个内存空间,然后赋值给他,再push,实现深拷贝。
    let obj={
 		id: Object.keys(this.addDirectoryList.directoryRemark.remark_datas),
 		name: this.remark_formInline.name,
 		type: this.remark_formInline.type,
 		creator: this.remark_formInline.creator,
 		time: this.remark_formInline.time,
 		account: this.remark_formInline.account,
 	}
 	this.remark_datas.push(obj);

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 当然可以!你需要的用户管理页面大概需要包含哪些功能呢? 具体来讲,为了做一个用户管理页面,你可能需要: 1. 在前端使用 Vue 框架构建页面 2. 使用 Vue 组件来封装可重用的代码片段 3. 使用 Vue 的路由功能来切换不同的页面 4. 使用 Axios 或其他工具来与后端 API 进行通信,获取用户数据并在前端展示 5. 使用表单、按钮等 HTML 元素来让用户进行操作,如添加、修改、删除用户 6. 在后端使用 Node.js、Express 或其他框架来提供 API,使前端能够与数据库进行交互 7. 使用数据库(如 MySQL、MongoDB 等)来存储用户数据 这些步骤大致描述了建立用户管理页面的流程。如果你还有其他问题或者需要更详细的帮助,可以告诉我,我会尽力为你解答。 ### 回答2: 当然可以帮您设计一个用户管理页面,使用Vue框架来实现。Vue是一种流行的前端框架,它帮助我们构建交互式的用户界面。以下是一个简单的步骤指南: 1. 首先,在HTML文件引入Vue.js库。可以通过CDN引入或者从本地引入。 2. 创建Vue实例,并指定要控制的元素。 3. 在Vue实例定义数据,例如要显示的用户信息。可以使用数组对象来存储用户数据。 4. 在HTML使用Vue指令(如v-for)遍历用户数据,并将其显示在页面上。 5. 添加表单元素以便添加或编辑用户信息。使用Vue指令(如v-model)与数据绑定,以便在表单输入更改时更数据。 6. 在Vue实例添加方法,以便处理用户的添加、编辑或删除操作。这些方法可以更用户数据,并呈现在页面上。 7. 在页面上添加按钮或链接,触发相应的方法。 8. 可以利用Vue的计算属性对数据进行排序、过滤等操作,以提供更加强大的用户管理功能。 以上是一个简单的示例,当然根据具体需求,您还可以添加更多的功能和交互效果。希望这些步骤能对您设计用户管理页面有所帮助。如果您有具体的需求或疑问,还请告诉我,我会尽力提供更详细的指导。 ### 回答3: 用户管理页面是一个用于管理用户信息的界面,可以实现用户的增删改查等功能。为了实现这个页面,我们可以使用Vue框架来开发。 首先,我们需要创建一个Vue实例来承载用户管理页面。在HTML引入Vue库,并在JavaScript创建一个Vue实例: ``` <!DOCTYPE html> <html> <head> <title>用户管理</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 在这里编写用户管理界面的HTML代码 --> </div> <script> new Vue({ el: '#app', // 在这里编写Vue的逻辑代码 }); </script> </body> </html> ``` 然后,我们可以在Vue实例的 `data` 属性定义用户数据的初始值,并在模板使用 `v-for` 指令循环渲染用户列表。同时,为了实现用户的增删改查功能,我们还需要定义一些方法: ``` <script> new Vue({ el: '#app', data: { users: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 25 }, { id: 3, name: '王五', age: 30 } ], newUser: { id: '', name: '', age: '' } }, methods: { addUser: function() { // 添加用户逻辑 this.users.push(this.newUser); this.newUser = { id: '', name: '', age: '' }; }, deleteUser: function(index) { // 删除用户逻辑 this.users.splice(index, 1); }, updateUser: function(index) { // 更用户逻辑 // 在这里可以实现修改用户的界面弹窗或者页面跳转等操作 } } }); </script> ``` 最后,在模板添加用户管理的HTML代码,并绑定相应的事件和数据: ``` <div id="app"> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(user, index) in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td> <button @click="deleteUser(index)">删除</button> <button @click="updateUser(index)">修改</button> </td> </tr> </tbody> </table> <div> <input v-model="newUser.id" placeholder="用户ID"> <input v-model="newUser.name" placeholder="用户姓名"> <input v-model="newUser.age" placeholder="用户年龄"> <button @click="addUser">添加用户</button> </div> </div> ``` 这样,一个简单的用户管理页面就完成了。当我们在表单输入用户的信息并点击添加按钮时,用户将会被添加到用户列表。同时,我们可以点击删除和修改按钮来实现相应的功能。通过使用Vue的双向数据绑定和事件绑定,我们可以轻松地完成用户管理页面的开发

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值