zoukankan      html  css  js  c++  java
  • Vue [__ob__: Observer]取不到值问题的解决

    产生原因

    如果从后端返回过来的数组数据,进行遍历的时候不在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){
       ......
    }
    
  • 相关阅读:
    bat常用指令记录
    物料主数据MM01扩充时默认值的设置 BADI_MATERIAL_REF
    CK11,CK11N 成本估算数据读取
    VUE中具名插槽和匿名插槽的使用
    VUE+element页面按钮调用dialog
    线程进程随笔
    "反直觉" 的Unity粒子系统API
    一个RingBuffer(C语言)
    一个极其简单(陋)的内存分配器
    nginx 转发接口出现 403 forbidden
  • 原文地址:https://www.cnblogs.com/lfnumber7/p/12543545.html
Copyright © 2011-2022 走看看