vue在取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined的解決
取對(duì)象長(zhǎng)度length時(shí)候出現(xiàn)undefined
代碼
data為一個(gè)對(duì)象
var key=Object.keys(datas) var value=Object.values(datas)
使用Object.keys轉(zhuǎn)化一下,
再取長(zhǎng)度
var keyslength=key.length
就能順利出對(duì)象長(zhǎng)度啦?。?！
vue2.0踩坑實(shí)況- length undefined??
在最近的一個(gè)vue案例里出現(xiàn)了這個(gè)問(wèn)題。
后臺(tái)通過(guò)mock數(shù)據(jù)傳遞seller.support的數(shù)組數(shù)據(jù)，想通過(guò)計(jì)算length來(lái)顯示個(gè)數(shù)。
<div class="supports-count">
<span class="count">{{seller.supports.length}}個(gè)</span>
<i class="icon-keyboard_arrow_right"></i>
</div>雖然界面可以顯示length數(shù)據(jù)，但是控制臺(tái)肥腸傲嬌一直報(bào)錯(cuò)。大概是說(shuō)找不到一個(gè)undefined的length
你丫這不是找到了么0.0
花了點(diǎn)時(shí)間研究下官方文檔才知道，vue的數(shù)據(jù)綁定在剛開(kāi)始只是和內(nèi)存建立聯(lián)系，并沒(méi)有真正的和后臺(tái)的數(shù)據(jù)掛上鉤，所以一開(kāi)始的seller.supports只是一個(gè)空值，必須在之前加上v-if，確保有值以后再開(kāi)始計(jì)算length
<div class="supports-count" v-if="seller.supports">
<span class="count">{{seller.supports.length}}個(gè)</span>
<i class="icon-keyboard_arrow_right"></i>
</div>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題
這篇文章主要介紹了vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來(lái)決定在 DOM 中是渲染還是銷(xiāo)毀元素或組件。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對(duì)vue 用$emit 與 $on 來(lái)進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看2018-05-05
這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。接下來(lái)通過(guò)本文給大家介紹Vuejs第十二篇之動(dòng)態(tài)組件，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了vue之bus總線簡(jiǎn)單使用講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能，本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02