這篇文章主要介紹了vue對storejs取得的資料進行處理時遇到的幾種問題小結,需要的朋友可以參考下
具體程式碼如下所示：
#
export default {
data(){
return {
shopList:{},
isEmpty:false, //判断购物车中是否有存在内容
}
},
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
this.shopList = store.get('shopCar');
console.log(this.shopList)
}
}
}這個時候印出來：
this.shopList 顯示的結果為{ob: Observer}
雖然可以在vue中直接使用如下：
<ul>
<li v-for = "list in shopList" :key = "list.id">
{{list}}
</li>
</ul>但是如果此時我想對this.shopList中的資料進行處理，就會出現問題，此時如果你想遍歷循環該數據，就會出現意想不到的效果，因為此時列印this.shopList.length 顯示出來的結果為undefined。
遍歷物件有幾種方法：
#1，最常用的for循環，但此時length為undefined，該方法不可用;
2，for in 同上原因不可使用
3. jquery中也有遍歷物件的方法$.each(this.shopList,function(n,i){})
你會發先第三種可以遍歷這個數據，那就可以實現數據的處理了。
但如果你的this.shopList這個物件中又包含了一層物件呢？ .each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問題了嗎？除了這個方法外，有種更好的方法：
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
var shopList = store.get('shopCar')
$.each(shopList,function(n,i){
//处理数据。。。。。
})
this.shopList = shopList;
console.log(this.shopList)
}
}#更簡單直接的方法是，將資料先賦值給一個變量，將資料處理為你想要的格式之後，複製給this.shopList即可。
為什麼我們直接將資料賦值給this.shopList就不可以對資料進行處理了呢？
原因是當你將資料賦值給this.shopList，也就是實作了vue的資料的雙向綁定。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是vue對storejs所取得的資料進行處理時遇到的幾個問題小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
