Eine Zusammenfassung mehrerer Probleme, die auftreten, wenn Vue von StoreJS erhaltene Daten verarbeitet

Dieser Artikel stellt hauptsächlich eine Zusammenfassung mehrerer Probleme vor, die bei der Verarbeitung der von storejs erhaltenen Daten auftreten. Freunde in Not können darauf verweisen

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 es jetzt aus:

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

Obwohl es direkt in vue as verwendet werden kann folgt:

<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, wird es zu diesem Zeitpunkt ein Problem geben Um die Daten zu durchlaufen, treten unerwartete Effekte 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 Schleife, aber derzeit ist die Länge nicht definiert. Diese Methode ist nicht verfügbar ;

2, denn in kann aus dem gleichen Grund wie oben nicht verwendet werden

3 Es gibt auch Methoden zum Durchlaufen von Objekten in jquery

$.each(this.shopList,function(n,i){})

Sie werden eine dritte Methode finden, die diese Daten durchqueren kann, dann kann eine Datenverarbeitung erreicht werden.

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 zunächst einer Variablen zuzuweisen und die Daten zu verarbeiten Nachdem Sie es auf das gewünschte Format eingestellt haben, kopieren Sie es nach 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Konvertieren von Formularelementen in JSON durch Erstellen von AJAX-Parametern

Ajax-Rückruf, um das Öffnen eines neuen Formulars zu verhindern Effektive Methoden zum Abfangen von Browsern_AJAX-bezogen

Besprechen Sie einige kleinere Probleme in Ajax

Das obige ist der detaillierte Inhalt vonEine Zusammenfassung mehrerer Probleme, die auftreten, wenn Vue von StoreJS erhaltene Daten verarbeitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!