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

更新時(shí)間：2018年03月20日 15:56:06 作者：cmchenmei

這篇文章主要介紹了vue對(duì)storejs獲取的數(shù)據(jù)進(jìn)行處理時(shí)遇到的幾種問題小結(jié),需要的朋友可以參考下

具體代碼如下所示：

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判斷購(gòu)物車中是否有存在內(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)問題，此時(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(),不就可以解決這種問題了嗎？除了這種方法外，有種更好的辦法：

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í)遇到的幾種問題小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

vue
storejs

相關(guān)文章

詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程,主要運(yùn)用的技術(shù)是vue+express+git+百度的應(yīng)用引擎BAE。需要的朋友可以參考下
2018-03-03
關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3實(shí)現(xiàn)計(jì)算屬性的代碼詳解
計(jì)算屬性對(duì)于前端開發(fā)來(lái)說(shuō)算是經(jīng)常使用的一個(gè)能力了,本文將從代碼層面來(lái)給大家介紹下Vue3是如何實(shí)現(xiàn)計(jì)算屬性的,需要的朋友可以參考下
2023-07-07
22個(gè)Vue優(yōu)化技巧(項(xiàng)目實(shí)用)
演示代碼使用 Vue3 + ts + Vite 編寫，但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-08-08
詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue跳轉(zhuǎn)頁(yè)面的幾種常用方法總結(jié)
在Vue.js中,頁(yè)面跳轉(zhuǎn)是構(gòu)建單頁(yè)面應(yīng)用（SPA）的基本操作之一,本文將介紹Vue中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法,并通過實(shí)例代碼幫助理解每種方法的用法,需要的朋友可以參考下
2024-09-09
詳解如何運(yùn)行vue項(xiàng)目
這篇文章主要介紹了如何運(yùn)行vue項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
sublime如何配置開發(fā)VUE環(huán)境自動(dòng)格式化代碼
這篇文章主要介紹了sublime如何配置開發(fā)VUE環(huán)境自動(dòng)格式化代碼問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10