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。 .html" target="_blank"> jquery にはオブジェクトを走査するためのメソッドもあります

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

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

より簡単で直接的な方法は、まずデータを変数に割り当て、そのデータを必要な形式に処理してから、 this.shopList にコピーすることです。

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

🎜この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜Vue で動的更新 Echarts コンポーネントを使用する方法🎜🎜🎜🎜🎜 vuex を使用する手順の詳細な説明🎜🎜🎜

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