Javascript 无法将Firebase实时数据库中的数据保存到Vue.js中的数组中，并将其用于在Vue2 google maps上显示标记

我在将数据从Firebase实时数据库保存到Vue组件内的阵列时遇到问题

我得到的主要错误是：“无法读取null的属性“savedLocations””

数组应该包含关于帖子的信息；包括标题、说明、图像和用户的位置。每个位置都将作为原始地址和地理位置（lat、lng）保存到数据库中，目标是在vue2谷歌地图上显示标记

表单中包含帖子所有信息的数据正在另一个视图中提交，因此我的主要问题是从firebase检索数据并在地图上显示标记

我得到错误的当前代码是：

export default {

data() {
    return {
        // check for sign in:
        signedIn: false,

        // map information
        map: null,
        myCoordinates: {
            lat: 0,
            lng: 0
        },
        zoom: 12,

        // locations:
        savedLocations: []
    }
},
async beforeMount() {

    // reference to list of posts
    var ref = db.ref("PhotoGallery");

    ref.on("value", function(snapshot) {
        snapshot.forEach((childSnapshot) => {
            this.savedLocations.push(childSnapshot.val());
        })
    }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
    });
}

如果我console.log所有的childsnapshot，我确实会从数据库输出中获取所有项目作为控制台中的对象，每个项目都是单独的，但我不知道如何将它们附加到数组中，以便我可以遍历它们并根据它们的地理位置进行标记

我的目标是能够迭代数组并使用以下代码创建标记：

        <google-map
        :center="myCoordinates"
        :zoom="zoom"
        style="width:100vw; height: 100vh; max-width: 100%; margin: 0 auto;"
        ref="mapRef"
        @dragend="handleDrag"
    >
        <markermap
            :key="index"
            v-for="(m, index) in savedLocations"
            :position="{lat: m.position.lat, lng: m.position.lng}"
            :clickable="true"
            :draggable="false"
        />
    </google-map>

此外，如果有一个更简单的方法来做到这一点，这将是欢迎的。我的目标就是能够根据数据库中的信息在地图上做标记，当它们被点击时，用标题和图像展开它们

---

谢谢你的帮助。干杯

我的快速猜测是，

这个

在您的代码中并不是您所期望的。如果是这种情况，您可以使用

=>

（胖箭头）符号来修复该问题：

ref.on("value", (snapshot) => {
    snapshot.forEach((childSnapshot) => {
        this.savedLocations.push(childSnapshot.val());
    })
}, (errorObject) => {
    console.log("The read failed: " + errorObject.code);
});

---

另请参见：

Downvoter:请你解释一下好吗？嘿，玉米片。我试着在下面帮助你。你有什么收获吗？

ref.on("value", (snapshot) => {
    snapshot.forEach((childSnapshot) => {
        this.savedLocations.push(childSnapshot.val());
    })
}, (errorObject) => {
    console.log("The read failed: " + errorObject.code);
});