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