vue+storejs はデータの取得を処理します

今回は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){})

vue で直接使用することもできます次のように:

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

しかし、この時点で this.shopList 内のデータを処理したい場合、データを走査してループする場合、this.shopList を印刷するため、予期せぬ影響が発生します。今回は .length で表示される結果は未定義です。

オブジェクトを走査するにはいくつかの方法があります:

1、最も一般的に使用される for ループですが、現時点では長さは未定義、このメソッドは使用できません。

2、上記と同じ理由で in は使用できません

3。 jquery $.each(this.shopList,function(n) でオブジェクトを走査するメソッドもあります。 ,i){})

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

rrreee

より簡単で直接的な方法は、まずデータを変数に割り当て、そのデータを必要な形式に処理してから、 this.shopList にコピーすることです。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書: 🎜🎜🎜jQuery トリガーボタンイベントを入力する (コード付き) 🎜🎜🎜🎜🎜jQuery+Ajax でユーザーを検証する🎜🎜🎜

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