Detaillierte Erläuterung der Schritte für vue zur Verarbeitung der von storejs erhaltenen Daten

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Schritte geben, mit denen Vue von Storejs erhaltene Daten verarbeitet Praktischer Fall, schauen wir uns das gemeinsam an. Der spezifische Code lautet wie folgt:

Drucken Sie es jetzt aus:

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

Die von this.shopList angezeigten Ergebnisse sind {

ob: Observer} Obwohl es wie folgt direkt in Vue verwendet werden kann:

Wenn ich jedoch zu diesem Zeitpunkt die Daten in this.shopList verarbeiten möchte, tritt ein Problem auf. Wenn Sie die Daten durchlaufen und schleifen möchten, treten unerwartete Effekte auf, da zu diesem Zeitpunkt die durch Drucken angezeigten Ergebnisse angezeigt werden . ist undefiniert.

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

this.shopList.length

Es gibt mehrere Möglichkeiten, ein Objekt zu durchlaufen : 1. Die am häufigsten verwendete for-Schleife

, aber derzeit ist die Länge nicht definiert und diese Methode ist nicht verfügbar

2. kann aus dem gleichen Grund wie oben nicht verwendet werden

3.

jquery

verfügt auch über Methoden zum Durchlaufen von Objekten

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

Was aber, 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:

Eine einfachere und direktere Möglichkeit besteht darin, die Daten zunächst einer Variablen zuzuweisen, die Daten in das gewünschte Format zu verarbeiten und sie dann nach this.shopList zu kopieren.

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

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:

Was sind die Gründe, warum die Verwendung von V-Show in VueJS nicht funktioniert?

Vue-berechnete Eigenschaften Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte für vue zur Verarbeitung der von storejs erhaltenen Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!