vue對storejs獲取的數(shù)據(jù)進行處理時遇到的幾種問題小結

具體代碼如下所示：

這個時候打印出來：

this.shopList 顯示的結果為 {ob: Observer}

雖然可以在vue中直接使用如下：

<ul>
 <li v-for = "list in shopList" :key = "list.id">
 {{list}}
 </li>
</ul>

但是如果此時我想對this.shopList中的數(shù)據(jù)進行處理，就會出現(xiàn)問題，此時如果你想遍歷循環(huán)該數(shù)據(jù)，就會出現(xiàn)意想不到的效果，因為此時打印 this.shopList.length 顯示出來的結果為undefined。

遍歷對象有幾種方法：

1，最常用的 for循環(huán) ，但此時length為undefined，該方法不可用；

2，for in 同上原因不可使用

3. jquery中也有遍歷對象的方法 $.each(this.shopList,function(n,i){})

你會發(fā)先第三種可以遍歷這個數(shù)據(jù)，那么就可以實現(xiàn)數(shù)據(jù)的處理了。

但是如果你的this.shopList這個對象中又包含了一層對象呢？.each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問題了嗎？除了這種方法外，有種更好的辦法：

更簡單直接的辦法是，將數(shù)據(jù)先賦值給一個變量，將數(shù)據(jù)處理為你想要的格式之后，再復制給this.shopList即可。

為什么我們直接將數(shù)據(jù)賦值給this.shopList就不可以對數(shù)據(jù)進行處理了呢？

原因是當你將數(shù)據(jù)賦值給this.shopList，即實現(xiàn)了vue的數(shù)據(jù)的雙向綁定。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

通過構造AJAX參數(shù)實現(xiàn)表單元素JSON相互轉(zhuǎn)換

ajax回調(diào)打開新窗體防止瀏覽器攔截有效方法_AJAX相關

探討Ajax中的一些小問題

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com