我不理解将firebase数据导入vue的内容......我很高兴删除这个问题,或者在得到答案后退出我作为程序员的工作;)
我得知数据是异步的,所以vue试图在收到数据之前渲染组件。但是,我不知道如何让它等待。非常感谢例子。我试过阅读文档,但我只是不理解。
这是一个小小的应用程序,显示我们公司的停车场,并将用户的水龙头(汽车)位置保存到火场(我们已经厌倦了忘记停放的地方)。感谢任何帮助!
哦,我正在使用set(),因为一次只需要保存一个汽车位置,所以每次用户点击屏幕上的新位置时都可以覆盖数据。
<template>
<div id="app">
<span id="marker" class="fas fa-times" :style="{ left: leftCoord, top: topCoord }"></span>
<img @click="saveCoordinates($event)" src="./assets/parking-lot.jpg">
</div>
</template>
<script>
import firebase from 'firebase'
const config = {
apiKey: 'MY-API-KEY',
authDomain: 'MY-APP.firebaseapp.com',
databaseURL: 'https://MY-APP.firebaseio.com',
projectId: 'MY-APP',
storageBucket: 'MY-APP.appspot.com',
messagingSenderId: '1234567890'
}
const app = firebase.initializeApp(config)
const db = app.database()
const locationRef = db.ref('location')
export default {
name: 'app',
firebase: {
location: locationRef
},
mounted () {
this.leftCoord = this.location.leftCoord
this.topCoord = this.location.topCoord
},
data () {
return {
leftCoord: '',
topCoord: ''
}
},
methods: {
saveCoordinates: function (clickEvent) {
const coordinates = {
leftCoord: clickEvent.layerX,
topCoord: clickEvent.layerY
}
this.location.set(coordinates)
}
}
}
</script>
答案 0 :(得分:2)
我添加了第二个答案,它不再基于mounted
挂钩而是基于对象绑定的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
</head>
<body>
<div id="app">
<span id="marker" class="fas fa-times" :style="{ left: leftCoord, top: topCoord }"></span>
<img @click="saveCoordinates($event)" src="./assets/parking-lot.jpg">
</div>
<script>
var config = {
apiKey: ".........",
authDomain: ".........",
databaseURL: ".........",
projectId: ".........",
storageBucket: "........."
};
/* global Vue, firebase */
var db = firebase.initializeApp(config).database()
var todosRef = db.ref('todos')
const locationRef = db.ref('location')
new Vue({
el: '#app',
name: 'app',
firebase: {
location: {
source: locationRef,
asObject: true,
readyCallback: function () {
this.leftCoord = this.location.leftCoord
this.topCoord = this.location.topCoord
}
}
},
data() {
return {
leftCoord: '',
topCoord: ''
}
},
methods: {
saveCoordinates: function (clickEvent) {
console.log(clickEvent.layerX)
const coordinates = {
leftCoord: clickEvent.layerX,
topCoord: clickEvent.layerY
}
locationRef.set(coordinates)
}
}
})
</script>
</body>
</html>
答案 1 :(得分:1)
如果location是一个对象,你需要像这样绑定:
export default {
name: 'app',
firebase: {
location: {
source: db.ref('location'),
asObject: true,
readyCallback: function () {}
}
},
mounted () {
this.leftCoord = this.location.leftCoord
this.topCoord = this.location.topCoord
},
data () {
return {
leftCoord: '',
topCoord: ''
}
},
methods: {
saveCoordinates: function (clickEvent) {
const coordinates = {
leftCoord: clickEvent.layerX,
topCoord: clickEvent.layerY
}
this.$firebaseRefs.location.set(coordinates)
}
}
}
请注意,设置时,我们需要使用this.$firebaseRefs.location.set(coordinates)
答案 2 :(得分:1)
这样可以解决问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
</head>
<body>
<div id="app">
<span id="marker" class="fas fa-times" :style="{ left: leftCoord, top: topCoord }"></span>
<img @click="saveCoordinates($event)" src="./assets/parking-lot.jpg">
<img @click="readCoords" src="./assets/parking-lot.jpg">
</div>
<script>
var config = {
apiKey: ".........",
authDomain: ".........",
databaseURL: ".........",
projectId: ".........",
storageBucket: "........."
};
/* global Vue, firebase */
var db = firebase.initializeApp(config).database()
var todosRef = db.ref('todos')
const locationRef = db.ref('location')
new Vue({
el: '#app',
name: 'app',
firebase: {
location: {
source: locationRef,
asObject: true
}
},
mounted() {
locationRef.once('value', snapshot => {
this.leftCoord = this.location.leftCoord
this.topCoord = this.location.topCoord
})
},
data() {
return {
leftCoord: '',
topCoord: ''
}
},
methods: {
saveCoordinates: function (clickEvent) {
console.log(clickEvent.layerX)
const coordinates = {
leftCoord: clickEvent.layerX,
topCoord: clickEvent.layerY
}
locationRef.set(coordinates)
},
readCoords: function (clickEvent) {
console.log(this.location.leftCoord);
console.log(this.location.topCoord);
}
}
})
</script>
</body>
</html>
显然,在vuefire中没有“本地”方式等待挂载数据的挂钩,请参阅https://github.com/vuejs/vuefire/issues/69
我添加了第二个带有新功能readCoords
的图像链接,仅用于测试目的。
请注意,您也可以在挂钩
中进行操作locationRef.once('value', snapshot => {
this.leftCoord = snapshot.val().leftCoord
this.topCoord = snapshot.val().topCoord
})