vue对storejs获取的数据进行处理时遇到的几种问题小结


Posted in Javascript onMarch 20, 2018

具体代码如下所示:

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获取的数据进行处理时遇到的几种问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
js实现时钟定时器
Mar 26 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 #Javascript
解决vue-router中的query动态传参问题
Mar 20 #Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 #Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
react-native封装插件swiper的使用方法
Mar 20 #Javascript
在vue项目中使用sass的配置方法
Mar 20 #Javascript
You might like
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php生成随机颜色的方法
2014/11/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
javascript event 事件解析
2011/01/31 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python字典序问题实例
2014/09/26 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python 代码调试技巧示例代码
2020/08/11 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
少年雷锋观后感
2015/06/10 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
初中班主任教育随笔
2015/08/15 职场文书