vue中调用接口返回数据监听问题--项目bug修复记录

mysql编辑页点击新增 jdbc配置 报错

首先看代码




我在编辑页调用了接口获取了编辑这页的数据，并赋值给了vue的data里进行监听，在组件中，这个新增按钮新增的input是v-for connectionSetting里面的properties ，看图三，但是请求这个接口返回的参数中没有properties字段，请求返回值看图四，所以在请求回来数据之后要做个判断，如果没有的话，添加一个空数组，于是第一次修改代码成这样

getConn(){
	getConnApi(this.edit).then(res=>{
		this.connectionSetting = res.data.body;
		if(!this.connectionSetting.properties){
			this.connectionSetting.properties = [];
		}
	})
}

这样写完，报错不见了，但是点击新增jdbc按钮没有反应，通过一番调试，发现问题是vue对你新增的没有监听到，因为是在挂载到data上之后做判断添加，vue并不能监听到，于是有了下面的修改

于是用变量接收了一下接口返回的值，并做判断，如果没有这个字段的话，给这个变量上添加上这个properties字段然后再挂到vue上，这样就可以实现监听了
最终实现