A summary of several problems encountered when vue processes data obtained by storejs

This article mainly introduces a summary of several problems encountered when vue processes the data obtained by storejs. Friends in need can refer to it

The specific code is as follows:

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

At this time, print it out:

The result displayed by this.shopList is {ob: Observer}

Although it is ok Use it directly in vue as follows:

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

But if I want to process the data in this.shopList at this time, problems will arise. If If you want to traverse and loop the data, unexpected effects will occur, because the result displayed when printing this.shopList.length is undefined.

There are several ways to traverse objects:

1, the most commonly used for loop, but at this time the length is undefined and this method is not available ;

2, for in cannot be used for the same reason as above

3. There are also methods of traversing objects in jquery$.each(this.shopList,function(n,i){})

You will find the third method that can traverse the data, then the data can be processed.

But what if your this.shopList object contains another layer of objects? If .each() contains another layer of .each() and contains another layer of .each(), wouldn’t this problem be solved? In addition to this method, there is a better way:

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

The simpler and more direct way is to first assign the data to a variable and process the data After setting it to the format you want, copy it to this.shopList.

Why can’t we process the data if we directly assign the data to this.shopList?

The reason is that when you assign data to this.shopList, you realize two-way binding of vue data.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Convert form elements to JSON by constructing AJAX parameters

ajax callback prevents opening a new form Effective methods of browser interception_AJAX related

Discuss some minor issues in Ajax

The above is the detailed content of A summary of several problems encountered when vue processes data obtained by storejs. For more information, please follow other related articles on the PHP Chinese website!