vueはstorejsで取得したデータを処理します

今回はvueがstorejsで取得したデータを処理する際の注意事項を紹介します。

具体的なコードは次のとおりです:

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

この時点で印刷してください:

this.shopList 表示される結果は {ob: Observer} ですob: Observer}

虽然可以在vue中直接使用如下：

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

但是如果此时我想对this.shopList中的数据进行处理，就会出现问题，此时如果你想遍历循环该数据，就会出现意想不到的效果，因为此时打印 this.shopList.length 显示出来的结果为undefined。

遍历对象有几种方法：

1，最常用的 for循环 ，但此时length为undefined，该方法不可用；

2，for in 同上原因不可使用

3. jquery中也有遍历对象的方法 $.each(this.shopList,function(n,i){})

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

1、最も一般的に使用される for ループ

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

3 番目のメソッドがあります。このデータを走査する方法があれば、それを達成できます。データは処理されます。 しかし、this.shopList オブジェクトに別のオブジェクトのレイヤーが含まれている場合はどうなるでしょうか? .each() に .each() の別の層が含まれ、さらに .each() の別の層が含まれていれば、この問題は解決されるのではないでしょうか?この方法に加えて、より良い方法があります:
rrreee

データを this.shopList に直接割り当てると、データを処理できないのはなぜですか?
その理由は、this.shopList にデータを割り当てると、vue データの双方向バインディングが実現されるためです。

以上がvueはstorejsで取得したデータを処理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。