Un résumé de plusieurs problèmes rencontrés lorsque vue traite les données obtenues par storejs

Cet article présente principalement un résumé de plusieurs problèmes rencontrés lorsque Vue traite les données obtenues par storejs. Les amis dans le besoin peuvent s'y référer

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

Imprimez-le à ce moment :

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 veux traiter les données de this.shopList à ce moment-là, il y aura un problème à ce moment-là. , si vous souhaitez parcourir Looping, ces données provoqueront des effets inattendus, car le résultat affiché lors de l'impression

n'est pas défini. this.shopList.length

Il existe plusieurs façons de parcourir des objets :

1, la boucle for la plus couramment utilisée, mais à l'heure actuelle, la longueur n'est pas définie, cette la 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 peut parcourir ces données, puis le traitement des données pourra ê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 façon :

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 manière plus simple et plus directe consiste d'abord à affecter les données à une variable, puis Une fois les données traitées dans le format souhaité, copiez-les dans this.shopList.

Pourquoi ne pouvons-nous pas traiter les données si nous les attribuons directement à this.shopList ?

La raison est que lorsque vous attribuez des données à this.shopList, vous réalisez une liaison bidirectionnelle des données de vue.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Conversion des éléments de formulaire en JSON en construisant des paramètres AJAX

Rappel Ajax pour empêcher l'ouverture d'un nouveau formulaire Méthodes efficaces d'interception du navigateur_liées à AJAX

Discutez de quelques problèmes mineurs dans Ajax

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!