Vue踩坑之Error in render “TypeError Cannot read properties of undefined (reading ‘url‘)“ found in

Vue踩坑之Error in render: “TypeError: Cannot read properties of undefined (reading ‘url’)” found in

今天写项目时发现项目报错，原因是Vue项目中使用v-if判断。一般来说都不会有什么问题的，但是当你判断的变量是多重对象属性时就会出现问题。比如下面的代码：

<div v-if="obj.file.url"></div>

<script>
export default {
	data () {
		return {
			obj: {}
		}
	}
}
</script>

这时项目就会报错。这是为什么呢？因为JS只能识别两重对象，像上面的代码obj.file.url，JS会这样解析：

obj.file = undefined
undefined.url

然后JS无法解析undefined.url,就直接报错了。
但是你如果把v-if那里改为v-if=“obj.file”,它就不会报错了，或者在data那里把obj设置为obj:{file{}}。

//第一种解决方案
<div v-if="obj.file"></div>
<script>
export default {
	data () {
		return {
			obj: {}
		}
	}
}
</script>


//第二种解决方案
<div v-if="obj.file.url"></div>

<script>
export default {
	data () {
		return {
			obj: {
				file: {}
			}
		}
	}
}
</script>

这两种解决方案都可以解决该问题。