使用变量使用Vue.js访问Firebase数据库中的正确数据

Question

我正在构建一个以Vue.js和Firebase作为后端的应用。我正在根据URL参数检索数据，例如：http://localhost:8082/?link=fe3b096a8ab1f4d7146ba0ce7555336a85f0532272e748358ec81beb2b17e494

然后我的代码通过此URL参数检索值owneruid和tripuid。它允许我从用户获取信息，例如userphotourl，username，tripphotourl，tripname，tripbegindate，tripenddate。到目前为止，它显示了值，所以一切都很好。

存储变量owneruid和tripuid，但由于异步，我在我的第一个.then（photosSnap =＆gt; {中包含对使用此变量的函数的调用，以逻辑顺序运行其余代码。

现在我想获得用户（owneruid）的一次旅行（tripuid）的所有照片的所有照片。数据库结构如下：

如何检索所有photourl并使用v-for？

显示它们

我的代码：

import HelloWorld from './components/HelloWorld'
    
import Firebase from 'firebase'
    
let config = {
    apiKey: "AIzaSyA9ap6pzsvkOv4tA2rgM6GKl2snKabzel4",
    authDomain: "travelertest-e316f.firebaseapp.com",
    databaseURL: "https://travelertest-e316f.firebaseio.com",
    projectId: "travelertest-e316f",
    storageBucket: "travelertest-e316f.appspot.com",
    messagingSenderId: "605093453777"
}

let app = Firebase.initializeApp(config);
let database = app.database();
    
let photosRef = database.ref('trips');
    
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}
          
let link = GetURLParameter('link');  
    
console.log(link);

//var owneruid = 'bCbADd1qJqhoVbDg0QCDIlq5eMx1';
//var tripuid = '-Kiqtd3BxPX8WvpOTxsW';
var owneruid = '';
var tripuid = '';

database.ref(`links/${link}`).once('value').then(photosSnap => {
var obj = photosSnap.val();
owneruid =  obj['owneruid'];
tripuid = obj['tripuid'];
console.log(owneruid);
console.log(tripuid);
getUserInfo(); 
getTripInfo();
getTripDate();
});

function getUserInfo() {
    database.ref(`user_profiles/${owneruid}`).once('value').then(photosSnap => {
    var obj = photosSnap.val();
    var userphotourl =  obj['photourl'];
    var username = obj['name'];
    $('.userphoto').attr('src', userphotourl);  
    $('.username').html(username);
    });
}
    
function getTripInfo() {
    database.ref(`trips/${owneruid}/trips/${tripuid}`).once('value').then(photosSnap => {
    var obj = photosSnap.val();
    var tripphotourl =  obj['photourl'];
    var tripname = obj['name'];
    $('#tripcoverphoto').attr('src', tripphotourl);   
    $('.tripname').html(tripname); 
    });
}
        
function ConvertDate(DateInSeconds) {
    var tripbegindateseconds = DateInSeconds;
    var tripbegindatefull = new Date(0); // The 0 there is the key, which sets the date to the epoch
    tripbegindatefull.setUTCSeconds(tripbegindateseconds);
    var tripbeginmonth = tripbegindatefull.getUTCMonth() + 1; //months from 1-12
    var tripbeginday = tripbegindatefull.getUTCDate();
    var tripbeginyear = tripbegindatefull.getUTCFullYear();
    tripbegindate = tripbeginday + "/" + tripbeginmonth + "/" + tripbeginyear;
    return tripbegindate;
}  
   
function getTripDate() {
    database.ref(`trips/${owneruid}/trips/${tripuid}`).once('value').then(photosSnap => {
    var obj = photosSnap.val();
    var tripbegindate =  ConvertDate(obj['begindate']);
    var tripenddate = ConvertDate(obj['enddate']);
    $('.tripbegindate').html(tripbegindate);    
    $('.tripenddate').html(tripenddate);    
    });
}
    
/*database.ref(`links/${link}`).once('value').then(photosSnap => {
    var obj = photosSnap.val();
    var owneruid =  obj['owneruid'];
    var tripuid = obj['tripuid'];
});

console.log(owneruid);
console.log(tripuid);*/
    

export default {
    name: 'app',
    firebase: {
        photos: photosRef
    }
}

    <div id="app">
        <div id="profile">
            <img class="userphoto" src="" /><br/>
            <font size="6" class="username"></font><br/>
            <img id="tripcoverphoto" src="" alt="" /><br/>
            <font size="8" class="tripname"></font><br/>
            <font size="6" class="tripbegindate"></font><font size="6"> - </font><font size="6" class="tripenddate"></font>
        </div>
        <div id="photoslist" v-for="photo in photos">
            <img id="image" height="400" width="400" src={{photo}}/>
        </div>
    </div>