Vue [__ob__: Observer]取不到值问题的解决
程序员文章站
2022-03-10 16:53:13
产生原因 如果从后端返回过来的数组数据,进行遍历的时候不在success回调函数内,则会产生如下的数据格式,虽然其也是数组格式,但是内部的值取不出来,给后台也传不过去。 原因:其实跟__ob__: Observer这个属性没有多少关系,原因还是在于异步,因为wx.chooseImage是一个异步执行 ......
产生原因
如果从后端返回过来的数组数据,进行遍历的时候不在success回调函数内,则会产生如下的数据格式,虽然其也是数组格式,但是内部的值取不出来,给后台也传不过去。
[__ob__: observer] 0: "http://localhost:5757/userimages/o-wf75fylwjy6vm_xrnyenipicog/2020032123451074033.jpg" 1: "http://localhost:5757/userimages/o-wf75fylwjy6vm_xrnyenipicog/2020032123451034889.jpg" length: 2 nv_length: (...) __ob__: observer {value: array(2), dep: dep, vmcount: 0} __proto__: array
原因:其实跟__ob__: observer这个属性没有多少关系,原因还是在于异步,因为wx.chooseimage是一个异步执行的函数,如果在另外一个函数中直接取得tempfilelist的值进行遍历的话,就会造成等不到回调结束就完成遍历,所以在数组中__ob__: observer属性虽然监听到了值,但是取不出来。
chooseimg(){ var that = this wx.chooseimage({ sizetype: ['compressed'], sourcetype: ['album', 'camera'], count:3, success:(res)=>{ console.log(res) that.tempfilelist = res.tempfilepaths } }) } submitimg(filepath){ ...... } submit(){ this.tempfilelist.map((item)=>{ that.submitimgs(item) }) }
解决办法
要在回调函数内进行遍历,这样回调函数返回数组数据的顺序和执行遍历的顺序就会一致,因此就不存在异步操作所产生的问题
chooseimg(){ var that = this wx.chooseimage({ sizetype: ['compressed'], sourcetype: ['album', 'camera'], count:3, success:(res)=>{ console.log(res) that.tempfilelist = res.tempfilepaths that.tempfilelist.map((item)=>{ that.submitimg(item) }) } }) } submitimg(filepath){ ...... }
上一篇: JAVA光头之路(八)--I/O流
推荐阅读
-
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
-
解决Vue axios post请求,后台获取不到数据的问题方法
-
解决webpack+Vue引入iView找不到字体文件的问题
-
解决vue v-for 遍历循环时key值报错的问题
-
解决python中遇到字典里key值为None的情况,取不出来的问题
-
解决vue2.0动态绑定图片src属性值初始化时报错的问题
-
解决vue动态路由异步加载import组件,加载不到module的问题
-
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
-
解决ajax传过来的值后台接收不到的问题
-
angularJs select绑定的model取不到值的解决方法