vue verarbeitet von storejs erhaltene Daten

Dieses Mal bringe ich Ihnen die von Vue Processing Storejs erhaltenen Vorsichtsmaßnahmen zum Abrufen von Daten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Der spezifische Code lautet wie folgt:

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)
    }
  }  
}

Drucken Sie ihn zu diesem Zeitpunkt aus:

this.shopList Das angezeigte Ergebnis ist {ob: Observer}

Obwohl es wie folgt direkt in Vue verwendet werden kann:

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

Aber wenn ich die Daten in this.shopList zu diesem Zeitpunkt verarbeiten möchte, treten Probleme auf Wenn Sie die Daten in einer Schleife verarbeiten, treten unerwartete Probleme auf, da das beim Drucken angezeigte Ergebnis undefiniert ist. this.shopList.length

Es gibt mehrere Möglichkeiten, Objekte zu durchlaufen :

1, die am häufigsten verwendete

for-Schleife , aber die Länge ist derzeit nicht definiert, diese Methode ist nicht verfügbar

2, da sie aus den gleichen Gründen wie oben nicht verwendet werden kann

3 🎜> verfügt auch über Methoden zum Durchlaufen von Objekten

Sie finden eine dritte Methode, die diese Daten durchqueren kann, dann können die Daten verarbeitet werden. $.each(this.shopList,function(n,i){})

Aber was ist, wenn Ihr this.shopList-Objekt eine weitere Objektebene enthält? Wenn .each() eine weitere Ebene von .each() enthält und eine weitere Ebene von .each() enthält, wäre dieses Problem dann nicht gelöst? Zusätzlich zu dieser Methode gibt es einen besseren Weg:

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)
    }
  }

Ein einfacherer und direkterer Weg besteht darin, die Daten zuerst einer Variablen zuzuweisen, die Daten in das gewünschte Format zu verarbeiten und sie dann in dieses zu kopieren .shopList reicht aus.

Warum können wir die Daten nicht verarbeiten, wenn wir die Daten direkt this.shopList zuordnen?

Der Grund dafür ist, dass Sie beim Zuweisen von Daten zu this.shopList eine bidirektionale Bindung von Vue-Daten realisieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die dynamische Aktualisierung der Echarts-Komponente in Vue

Detaillierte Erläuterung der Vuex-Nutzungsschritte

Das obige ist der detaillierte Inhalt vonvue verarbeitet von storejs erhaltene Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!