javascript - Problem with asynchronous return value in js?

Question

1. The following is the list rendering of my v-for

 <p class="swiper-slide" v-for="bind in binds">
            <p class="bind_box">
              <p class="bind_box_top">
                <p class="bind_box_face"><img :src="bind.face" v-if="bind.face"><img src="../page/baby/images/face_default.png" v-else></p>
                <p class="bind_box_name">{{bind.name}}</p>
              </p>
              <p class="bind_box_main">
                <p class="bind_box_pic"><img :src="bind.id | createdEwm(bind.name,bind.token)"></p>
                <p class="bind_box_text">扫描二维码关注宝贝</p>
              </p>
            </p>
        </p>

2. The following is the method of createdEwm:

createdEwm:function(id,name,token){
        var ewmUrl="bind|"+id+"|"+name//+"|"+token
        var ewmPath=''
        jsbridge.callMethod({
          methodName:"qrGenerate",
          params:{url:ewmUrl,size:150},
          complete:function(data){
            let obj = JSON.parse(data);
            if(obj.errCode=='0'){
              ewmPath=obj.path
            }else{
                alert(obj.errMsg)
                ewmPath=''
            }
            alert(ewmPath)
            return ewmPath
          }
        })
      }

Question: At this time, alert can pop up the returned ob.path data, but the return returned to: src is empty? Isn't the object returned by return createdEwm? Or is the corresponding return now complete?

Answer 1

The return of the inner method has nothing to do with the outer method

Answer 2

You have to see clearly that jsbridgeyi is already executing the callMethod method, and complete is just an aspect under callMethod. If you return ewmPath, this scope is only under callMethod, not under createdEwm, so the return will be empty