具體代碼如下所示：

export default {  data(){    return {      shopList:{},      isEmpty:false, //判斷購(gòu)物車(chē)中是否有存在內(nèi)容    }  },  created(){    if(!store.get('?shopCar')){      this.isEmpty = true;    }else{      //對(duì)數(shù)據(jù)處理 將商店中名中的地址分離出來(lái)      this.shopList = store.get('shopCar');      console.log(this.shopList)    }  }  }    

這個(gè)時(shí)候打印出來(lái)：

this.shopList 顯示的結(jié)果為 {ob: Observer}

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

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

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

遍歷對(duì)象有幾種方法：

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

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

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

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

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

created(){    if(!store.get('?shopCar')){      this.isEmpty = true;    }else{      //對(duì)數(shù)據(jù)處理 將商店中名中的地址分離出來(lái)      var shopList = store.get('shopCar')      $.each(shopList,function(n,i){        //處理數(shù)據(jù)。。。。。      })      this.shopList = shopList;      console.log(this.shopList)    }  }

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

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

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

總結(jié)

以上所述是小編給大家介紹的vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問(wèn)題小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！