vue3.0 vant popup渲染不出來問題及解決
vue3.0 vant popup渲染不出來
遇到這個問下，先檢查看看是不是看著vant的2.x版本進行開發(fā)。
vant2.x版本代碼如下：
<van-popup
? v-model="show"
? closeable
? position="bottom"
? :style="{ height: '30%' }"
/>vant3.x版本代碼如下：
<van-popup
? v-model:show="show"
? round
? position="bottom"
? :style="{ height: '30%' }"
/>發(fā)現(xiàn) v-model:show=“show”，v-model的時候多了個:show。
開發(fā)時還是得注意看插件的版本號是不是支持到vue3.x。
vant 3.x地址：https://vant-contrib.gitee.io/vant/next/#/zh-CN
vue3中組件無法渲染成功
TypeError: Cannot read property ‘avatar‘ of undefined
做項目的時候，通過props傳值傳了對象到子組件，結果調用的時候一直報錯說找不到對象中的某個屬性(undefined)，但是我通過devtools查看的時候卻可以在子組件中查找到這個對象的所有完整屬性，說明這個對象已經傳到子組件了，對象是沒有問題的。
報錯情況如下：
找了很久發(fā)現(xiàn)是在template中，我在根組件里添加了是否要顯示的判斷
<div v-if="Object.keys(commentinfo).length != 0" class="comment-info">
但是括號的位置錯了，一開始寫成了如下的錯誤方式，所以導致了模版沒辦法渲染。
<div v-if="Object.keys(commentinfo.length) != 0" class="comment-info">
計算機的報錯原因有時候是不準確的，當整個頁面都顯示不出來的時候，也許可以看看根組件有無問題。
另外，對于自己不太熟悉的屬性/寫法，應該好好理解再三檢查，剛開始接觸新東西就是比較容易犯錯。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 可折疊列表 v-for循環(huán)展示的實例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例
Vue.js中的遞歸組件是一個可以調用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關資料,需要的朋友可以參考下2021-08-08
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue?退出登錄?清除localStorage的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue 計數器的實現(xiàn)，主要利用HTML實現(xiàn)步驟現(xiàn)在頁面上簡單實現(xiàn)一個計數器，內容簡單且詳細,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報錯Failed?to?resolve?component:?NuxtChild的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了vue 翻頁組件vue-flip-page，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
vue、uniapp中動態(tài)添加綁定style、class?9種實現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09