Javascript 使用promise传递参数VUE

我在传递

的值和参数时遇到问题，但是当我
控制台.log（url）
返回值时

var x =""

export default{

firebase(){
return {
    menu : db.ref('menu')
}
},


    data(){
        return {
        menu : [],
        sampleVar : ""
        }

    },methods: {
        getURL(imageUri){
            var starsRef = sb.refFromURL('https://firebasestorage.googleapis.com/v0/b/hse-delights.appspot.com/o/'+imageUri);
             starsRef.getDownloadURL().then(function(url) {
                x = url;
                this.sampleVar = url;
                console.log(url);
            }) 
            return x;

        }
    }

}

即使我尝试了
返回这个。sampleVar
我也无法获取值，我是否缺少传递参数的内容？请帮忙，非常感谢

我的模板是

            <div class="menuList__item" v-for="food in menu">
                <div class="menuList__color pr">
                    <div class="menuList__img">
                        <img class="menuList__path" :src="getURL(food.mPath)">
                    </div>
                    <div class="menuList__details pr">
                        <strong class="menuList__name"> {{food.mName}} </strong>
                        <div class="menuList__description">{{food.mDesc}}</div>
                        <div class="pa menuList__price">P400.00</div>
                        <div class="pa menuList__category">Rice Dishes </div>
                    </div>
                </div>
            </div>


{{food.mName}
{{food.mDesc}
P400.00
米饭
在调用之前，使用箭头函数或为此
分配变量。回调函数上下文中的
this
是进行API调用的对象，而不是vue组件

因此：

或

不过，我更喜欢使用第二个选项，因为我喜欢箭头语法

编辑：顺便说一下，当您在最后返回
x
时，它实际上没有改变，因为这只会发生在回调中。您最好重构代码，使
x
实际上是组件的一个属性，并从模板访问其值（如果这是目标的话）

编辑2：我现在明白了。您要做的应该是直接引用属性并在开始时加载URL

我会在从firebase检索数据后执行此操作，如下所示（我假设您使用的是
vuefire
，似乎就是这样）：

然后，在HTML中，您只能引用：

<img class="menuList__path" :src="food.imgURL">

在调用之前，使用箭头函数或为此
分配变量。回调函数上下文中的
this
是进行API调用的对象，而不是vue组件

因此：

或

不过，我更喜欢使用第二个选项，因为我喜欢箭头语法

编辑：顺便说一下，当您在最后返回
x
时，它实际上没有改变，因为这只会发生在回调中。您最好重构代码，使
x
实际上是组件的一个属性，并从模板访问其值（如果这是目标的话）

编辑2：我现在明白了。您要做的应该是直接引用属性并在开始时加载URL

我会在从firebase检索数据后执行此操作，如下所示（我假设您使用的是
vuefire
，似乎就是这样）：

然后，在HTML中，您只能引用：

<img class="menuList__path" :src="food.imgURL">


我仍然得到错误
ReferenceError:x没有定义
，你说的重构是什么意思？谢谢您在哪里使用
x
？我没有在你的代码中看到它。
：src=“getURL（food.mPath）”
我希望它成为
url的值
我用一种更好的方法编辑了我的答案。我仍然得到错误
ReferenceError:x没有定义
，重构是什么意思？谢谢您在哪里使用
x
？我没有在你的代码中看到它。
：src=“getURL（food.mPath）”
我希望它成为
url
的值。我用一种更好的方法编辑了我的答案。
firebase () {
  return {
    menu: {
      asObject: false,
      source: db.ref('menu'),
      readyCallback () {
        Promise.all(this.menu.map(
          food => sb.refFromURL('...' + food.mPath).getDownloadURL()
        )).then(urls => {
          this.menu = this.menu.map((food, index) => {
            food.imgURL = urls[index]
            return food
          })
        })
      }
    }
  }
}

<img class="menuList__path" :src="food.imgURL">