vue3中,使用ref或者reactive定义数据

let ruleForm= reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})

如果要修改appId的值,就是:

ruleForm.appId = '123'

如果此时ruleForm里面的属性都有值了,此时又需要置空,如果一个个去操作的话,显得太过冗余,且此处我只写了三个数据,但实际开发时可能有更多个数据,此时我就想整体直接赋值

let defaultForm = reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})
ruleForm = defaultForm

但是会发现上述那样根本无法赋值

=============================================

原因是什么我不清楚,但是解决方法是:

以后在vue3中定义数据时,最好还是参考vue2data(){ return {}}的形式,一次性暴露

let Data = reactive({
	ruleForm: {
		appId: '',
		serviceId: '',
		creatorId: ''
	},
	str: '',
	arr: [],
	.......
})

let defaultForm = reactive({
	appId: '',
	serviceId: '',
	creatorId: ''
})

Data.ruleForm = defaultForm			// 这里赋值就成功了

// 数组也是一样
let defaultArr = [1, 2, 3]
Data.arr = defaultArr
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐