vue渲染时数据对象里面的子对象的属性报错undefined,但页面正常渲染。
报如图所示错误
在这里插入图片描述
页面中报错的位置
在这里插入图片描述

原因是在data中申明了空对象,页面在渲染的时候,数据还没获取到的时候,首先渲染的是初始值,所以会报错。而数据获取回来之后,由于vue双向绑定的特点,页面会再次正常渲染。所以从结果上看是页面既成功渲染了,又有报错信息。
在这里插入图片描述

解决办法

1.使用v-if判断
在这里插入图片描述
2.申明对象时为对象设置初始值

	export default {
	  data() {
	    return {
	      dataDetail: {
		    depot: {
	          depot_name: '质检部'
		    }
	      }
	    }
	  }
	}
	 // 或者
	 const defaultDataDetail = {
	  depot: {
   		depot_name: '质检部'
      }
	}
	 export default {
	  data() {
	    return {
	      dataDetail: Object.assign({}, defaultDataDetail)
	    }
	  }
	}
Logo

前往低代码交流专区

更多推荐