使用 Promise 传递参数 VUE

Question

我在传递 then parameter 的值时遇到问题，但是当我 console.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;

        }
    }

}

即使我尝试了return this.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>

Answer 1

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

所以：

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

    }

或者

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

    }

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

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

编辑 2：我现在明白了。您应该通过直接引用属性并在开始时加载 url 来完成您想要做的事情。

我会在从 firebase 检索数据后这样做，就像这样（我假设您使用的是 vuefire，这似乎是这种情况）：

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
          })
        })
      }
    }
  }
}

然后，在您的 HTML 中，您只需引用：

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