具体代码如下所示:
- 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}
虽然可以在 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 这个对象中又包含了一层对象呢?.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)
- }
- }
更简单直接的办法是, 将数据先赋值给一个变量, 将数据处理为你想要的格式之后, 再复制给 this.shopList 即可
为什么我们直接将数据赋值给 this.shopList 就不可以对数据进行处理了呢?
原因是当你将数据赋值给 this.shopList, 即实现了 vue 的数据的双向绑定
总结
以上所述是小编给大家介绍的 vue 对 storejs 获取的数据进行处理时遇到的几种问题小结, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/136777.htm