1---
2title: Check for Null/Undefined Before Accessing Properties in v-if
3impact: MEDIUM
4impactDescription: Accessing properties on null/undefined causes runtime errors and crashes
5type: capability
6tags: [vue3, conditional-rendering, v-if, null-check, defensive-programming]
7---
8 
9# Check for Null/Undefined Before Accessing Properties in v-if
10 
11**Impact: MEDIUM** - Accessing properties on null or undefined objects in `v-if` conditions causes "Cannot read property of undefined" runtime errors. This commonly occurs when data is loaded asynchronously or when optional object properties are accessed without null checks.
12 
13## Task Checklist
14 
15- [ ] Always check that an object exists before accessing its properties
16- [ ] Use optional chaining (?.) in Vue 3 templates for cleaner null checks
17- [ ] Consider using computed properties for complex conditional logic
18- [ ] Handle loading states explicitly rather than relying on undefined checks
19 
20**Incorrect:**
21```html
22<!-- WRONG: Accessing property before checking object exists -->
23<template>
24  <div v-if="user.isAdmin">
25    Admin Panel
26  </div>
27  <!-- Error if user is null/undefined: Cannot read property 'isAdmin' of undefined -->
28</template>
29```
30 
31```html
32<!-- WRONG: Nested property access without checks -->
33<template>
34  <div v-if="order.customer.address.city === 'NYC'">
35    Local delivery available
36  </div>
37  <!-- Error if any level is undefined -->
38</template>
39```
40 
41```html
42<!-- WRONG: Array access without existence check -->
43<template>
44  <div v-if="items[0].name === 'Featured'">
45    {{ items[0].description }}
46  </div>
47  <!-- Error if items is empty array -->
48</template>
49```
50 
51**Correct:**
52```html
53<!-- CORRECT: Check object exists first with && -->
54<template>
55  <div v-if="user && user.isAdmin">
56    Admin Panel
57  </div>
58</template>
59```
60 
61```html
62<!-- CORRECT: Optional chaining (Vue 3) -->
63<template>
64  <div v-if="user?.isAdmin">
65    Admin Panel
66  </div>
67</template>
68```
69 
70```html
71<!-- CORRECT: Optional chaining for nested properties -->
72<template>
73  <div v-if="order?.customer?.address?.city === 'NYC'">
74    Local delivery available
75  </div>
76</template>
77```
78 
79```html
80<!-- CORRECT: Array length check before access -->
81<template>
82  <div v-if="items.length > 0 && items[0].name === 'Featured'">
83    {{ items[0].description }}
84  </div>
85 
86  <!-- Or with optional chaining -->
87  <div v-if="items?.[0]?.name === 'Featured'">
88    {{ items[0].description }}
89  </div>
90</template>
91```
92 
93```html
94<!-- CORRECT: Explicit loading state handling -->
95<template>
96  <div v-if="isLoading">Loading...</div>
97  <div v-else-if="error">Error: {{ error.message }}</div>
98  <div v-else-if="user">
99    <h1>Welcome, {{ user.name }}</h1>
100    <div v-if="user.isAdmin">Admin Panel</div>
101  </div>
102  <div v-else>No user data</div>
103</template>
104```
105 
106## Using Computed Properties for Complex Checks
107 
108```javascript
109// CORRECT: Move complex checks to computed properties
110<script setup>
111import { computed } from 'vue'
112 
113const props = defineProps(['user', 'permissions'])
114 
115const canAccessAdmin = computed(() => {
116  return props.user?.isAdmin &&
117         props.permissions?.includes('admin_panel') &&
118         !props.user?.isDisabled
119})
120 
121const userDisplayName = computed(() => {
122  return props.user?.profile?.displayName ||
123         props.user?.name ||
124         'Anonymous'
125})
126</script>
127 
128<template>
129  <div v-if="canAccessAdmin">
130    Admin Panel
131  </div>
132  <span>{{ userDisplayName }}</span>
133</template>
134```
135 
136## Common Async Data Pattern
137 
138```javascript
139// CORRECT: Handle async data loading properly
140<script setup>
141import { ref, onMounted } from 'vue'
142 
143const user = ref(null)
144const isLoading = ref(true)
145const error = ref(null)
146 
147onMounted(async () => {
148  try {
149    user.value = await fetchUser()
150  } catch (e) {
151    error.value = e
152  } finally {
153    isLoading.value = false
154  }
155})
156</script>
157 
158<template>
159  <div v-if="isLoading">Loading user...</div>
160  <div v-else-if="error">Failed to load user</div>
161  <div v-else-if="user">
162    <!-- Safe to access user properties here -->
163    <h1>{{ user.name }}</h1>
164    <p v-if="user.bio">{{ user.bio }}</p>
165  </div>
166</template>
167```
168 
169## Reference
170- [Vue.js Conditional Rendering](https://vuejs.org/guide/essentials/conditional.html)
171- [MDN - Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
172