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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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学习之运算符相关概念
2011/06/09 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
vuex实现及简略解析(小结)
2019/03/01 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
用python对oracle进行简单性能测试
2020/12/05 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
项目计划书范文
2014/01/09 职场文书
员工工作自我评价
2014/09/26 职场文书
任命书标准格式
2015/03/02 职场文书
评职称个人总结
2015/03/05 职场文书
赞助商致辞
2015/07/30 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python