vue+storejs kümmert sich um das Abrufen von Daten

Dieses Mal werde ich Ihnen die Vue+StoreJS-Verarbeitung zum Abrufen von Daten vorstellen. Was sind die Vorsichtsmaßnahmen für die Vue+StoreJS-Verarbeitung zum Abrufen von Daten?

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 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 zuerst einer Variablen zuzuweisen, die Daten in das gewünschte Format zu verarbeiten und sie dann in dieses zu kopieren .shopList reicht aus.

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:

jQuery Trigger-Button-Ereignis eingeben (mit Code)

jQuery+Ajax-Benutzer authentifizieren

Das obige ist der detaillierte Inhalt vonvue+storejs kümmert sich um das Abrufen von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!