vue が storejs によって取得されたデータを処理するときに発生するいくつかの問題の概要

この記事では主に、storejs で取得したデータを Vue が処理するときに発生するいくつかの問題の概要を紹介します。必要な方は参照してください。

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

this.shopList は結果 {ob: Observer} を表示します

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

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

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

しかし、この時点で使用したい場合this.shopList データを処理するときに問題が発生します。this.shopList.length の印刷時に表示される結果が未定義であるため、データを走査してループする場合、予期しない影響が発生します。 。

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

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

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

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

3 番目のメソッドはデータを走査し、データを処理できることがわかります。

しかし、this.shopList オブジェクトに別のオブジェクトのレイヤーが含まれている場合はどうなるでしょうか? .each() に .each() の別の層が含まれ、さらに .each() の別の層が含まれていれば、この問題は解決されるのではないでしょうか?この方法に加えて、より良い方法があります:

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

より簡単で直接的な方法は、最初にデータを変数に代入し、データを必要な形式に処理してから、これにコピーすることです。 .shopList で十分です。 データを this.shopList に直接割り当てると、データを処理できないのはなぜですか?

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

上記は私があなたのためにまとめたものです。
関連記事:

AJAXパラメータを構築してフォーム要素をJSONに変換する

ブラウザの傍受を防ぐために新しいフォームを開くためのajaxコールバック 効果的なメソッド_AJAX関連

🎜🎜🎜Ajaxのいくつかの小さな問題について議論する🎜🎜 🎜 🎜🎜🎜🎜

以上がvue が storejs によって取得されたデータを処理するときに発生するいくつかの問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。