vue动态向数组中添加对象(关于v-for,input 和 push)

核心:深拷贝
第一步:
写在data(): 设datas数组,以及datas中需求的对象

datas: [],
data_formInput: {
	keyword: '',//关键字
	describe: '',//描述
},

第二步:(对象中的属性,input中的数据)双向绑定


	请输入关键字
	请输入描述
	

第三步:深拷贝保存数据并置空input

create() {
//这里要设一个对象来进行深拷贝才能避免每次push的时候都被最后一次提交的数据覆盖,也可以避免置空的时候数据丢失
	let obj = {
		keyword: this.data_formInput.keyword,
		describe: this.data_formInput.describe
	}
	this.datas.push(obj);
	this.data_formInput.keyword = ''//提交input之后置空
	this.data_formInput.describe = ''
},

第四步:循环显示刚刚input提交的数据


放一段完整代码:挺多的,实现了点击添加关键字按钮的时候打开输入关键字和描述,提交的页面,点击提交的时候显示已保存的关键字数据。逻辑很简单,主要是记录一下这里的深拷贝。






你可能感兴趣的:(uniapp,vue,javascript)