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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
详解vue-router导航守卫
Jan 19 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
three.js 如何制作魔方
Jul 31 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
解析php中反射的应用
2013/06/18 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php解决安全问题的方法实例
2019/09/19 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
传播学毕业生求职信
2013/10/11 职场文书
工作决心书
2014/03/11 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
初中语文教学研修日志
2015/11/13 职场文书
入党心得体会
2019/06/20 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
pytorch Dropout过拟合的操作
2021/05/27 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python