vue+storejs gère l'obtention des données

Cette fois, je vais vous présenter le traitement vue+storejs pour obtenir des données. Quelles sont les précautions à prendre pour le traitement vue+storejs pour obtenir des données ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Le code spécifique est le suivant :

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

A ce moment, imprimez-le :

this.shopList Le résultat affiché est {ob: Observer}

Bien qu'il puisse être utilisé directement dans vue comme suit :

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

Mais si je souhaite traiter les données de this.shopList à ce moment-là, des problèmes surgiront à ce moment-là, si vous le souhaitez. pour parcourir et boucler les données, vous Un effet inattendu se produit, car le résultat affiché lors de l'impression this.shopList.length n'est pas défini.

Il existe plusieurs façons de parcourir des objets :

1, la boucle for la plus couramment utilisée, mais pour le moment la longueur n'est pas définie, cette méthode n'est pas disponible ;

2, car in ne peut pas être utilisé pour la même raison que ci-dessus

3 Il existe également des méthodes pour parcourir des objets dans jquery$.each(this.shopList,function(n,i){})

Vous trouverez une troisième méthode qui permet de parcourir ces données, le traitement des données pourra alors être réalisé.

Mais que se passe-t-il si votre objet this.shopList contient une autre couche d'objets ? Si .each() contient une autre couche de .each() et contient une autre couche de .each(), ce problème ne serait-il pas résolu ? En plus de cette méthode, il existe une meilleure méthode :

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

Une méthode plus simple et plus directe consiste d'abord à attribuer les données à une variable, à traiter les données dans le format souhaité, puis à les copier. Donnez simplement this.shopList.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery Entrez l'événement du bouton de déclenchement (avec code)

jQuery+Ajax vérifier l'utilisateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!