當我們vue項目渲染數據時，有時候頁面渲染成功，但是控制台卻報錯： TypeError: Cannot read property 'xxx' of undefined 。這是因為一開始你渲染的數據還沒有賦值成功，解決辦法有三種：
1.首先看個例子（下面的html頁面渲染時會報錯：TypeError: Cannot read property 'firstName' of undefined）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>解決數據TypeError的問題</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app"> <div>{{message.sex}}</div> <div> <span>{{message.name.firstName}}</span><span>{{message.name.lastName}}</span> </div> </div> <script> var app = new Vue({ el: '#app', data: { message:"" }, methods: { test(){ //寫不寫延時器都一樣，這里只是模仿調用axios請求的效果 setTimeout(() => { var res={sex:'man',name:{firstName:'one',lastName:'two'}} this.message=res; }, 1000); } }, mounted() { this.test(); }, }) </script> </body> </html>
原因：初始化頁面時，message的值為空，在渲染message.name.firstName時name沒有值，name.firstName肯定就是undefined了
2.解決方法：
- 方案1： 使用 v-if=""，里面填你意淫出來的屬性值，比如這里是填 v-if = "message.name"
- 方案2： 提前在數據里面聲明要渲染的多層屬性，比如這里是填 message : { name : " " }
- 方案3：利用&&符號加上判斷，比如寫成 message.name && message.name.firstName （和方案一原理一樣）
3.報錯不再有，天天好心情
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>解決數據TypeError的問題</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> </head> <body> <div id="app"> <div>{{message.sex}}</div> <!-- 方法1：在你使用沒有聲明的多層屬性前加v-if （推薦）--> <div v-if="message.name"> <span>{{message.name.firstName}}</span><span>{{message.name.lastName}}</span> </div> </div> <script> var app = new Vue({ el: '#app', data: { message:"", //方法2： 提前聲明要渲染的多層屬性 // message:{ // name:"" // } }, methods: { test(){ setTimeout(() => { var res={sex:'man',name:{firstName:'one',lastName:'two'}} this.message=res; }, 1000); } }, mounted() { this.test(); }, }) </script> </body> </html>
新建了一個QQ群，群號： 1160215841 有關vue和element的知識幾乎有問必答，歡迎進群~
QQ掃碼進群：
