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">

使用promise传递参数VUE

1 个答案: