firebase快照json对象作为文本而不是vue.js中的对象

我可以提取数据，但它会在我的视图中将其作为对象打印：

{ "-MH8EpUbn1Eu3LdT0Tj0": { "code": "https://www.apesyntax.com", "content": "This is the tut content", "date": "2020-09-13", "email": "test", "first": "tester guy", "language": [ "VUE" ], "last": "testing", "picture": "", "title": "Get data from json to Ruby object ", "userID": "3DSOrtpBHlYENn14bE9UJKWly4G3" }, "-MH8TRc3NfinUtI-XORZ": { "code": "https://www.codepen.io/apesyntax/pen/ExKNawv", "content": "asdad asd asd a", "date": "2020-09-13", "email": "test@tester", "first": "tester", "language": [ "Ruby", "Python" ], "last": "asda", "picture": "", "title": "Add a new tutorial!", "userID": "3DSOrtpBHlYENn14bE9UJKWly4G3" } }

我用来从fire base db中提取数据的创建函数是：

教程
{{authUser.favoriteFood}
{{authUser.myTutorialTitle}

从“../plugins/firebase”导入firebase
从“vue”导入vue
设db=firebase.database（）；
让usersRef=db.ref（'users'）；
让tutRef=db.ref（“教程”）；
导出默认值{
名称：'tutShow'，
数据（）{
返回{
授权用户：“”，
favoriteFood:null，
MyTutorialTile:null
}
},
方法：{
},
已创建：函数（）{
data=>console.log（data.user、data.tutorials、data.credential.accessToken）
firebase.auth（）.onAuthStateChanged（用户=>{
this.authUser=user
如果（用户）{
usersRef.child（user.uid）.once（'value'，snapshot=>{
if（snapshot.val（））{
this.favoriteFood=snapshot.val（）.favoriteFood
vue.set（this.authUser，'favoriteFood'，this.favoriteFood）
}
})
tutRef.child（user.uid）.once（'value'，snapshot=>{
if（snapshot.val（））{
this.myTutorialTitle=snapshot.val（）
vue.set（this.authUser，'myTutorialTitle'，this.myTutorialTitle）
}
});
}
})
}
}
//下面的示例直接从firebase获取json
//这是。$http.get（'https://apesyntax.firebaseio.com/tutorials.json')
//.then（response=>response.json（））
//。然后（数据=>{
//让列表=[]；
//for（让我们输入数据）{
//list.push({
//…数据[键]，
//id:钥匙
//            })
//        }
//console.log（列表）
//this.tutorials=列表；
//    })

如果我们在下面的结果中观察，我们可以理解第一个调用被打印为文本“Potatos”，但下一个调用被打印为对象：

---

我想知道如何才能更好地打印它。

首先，您的教程参考似乎返回了一个对象。为了正确地显示它，您应该迭代它的属性

教程
{{authUser.favoriteFood}
{{tutorial.title}}
{{tutorial.content}}

---

现在来看一些改进

在这两行中

vue.set（this.authUser，'favoriteFood'，this.favoriteFood）
//及
set（this.authUser，'myTutorialTitle'，this.myTutorialTitle）

您将

this.authUser

视为对象，但在

数据

初始化器中，您已将其设置为空字符串

首先将

authUser

设置为对象

数据：（）=>({
authUser:{}
})

注意：我认为没有任何理由将

favoriteFood

和

myTutorialTitle

复制为顶级数据属性

现在，在您的

onAuthStateChanged

回调中，您可以读取数据并构建您的

authUser

firebase.auth（）.onAuthStateChanged（异步用户=>{
如果（用户）{
//并行获取用户和教程引用
const[userSnapshot，tutorialSnapshot]=wait Promise.all([
usersRef.child（user.uid）.once（“值”），
tutRef.child（user.uid）.once（“值”）
])
//现在构造完整的“authUser”对象
this.authUser={
…用户，
favoriteFood:userSnapshot.val（）？.favoriteFood，
myTutorialTitle:tutorialSnapshot.val（）？.myTutorialTitle
}
}
})

---

看看那是不是

？。

语法对你来说是新的。

正如你所看到的，我试着让标题进行测试，如果可能的话，然后我可以把剩下的数据拉到一个v形循环或其他东西中。到目前为止，我很自豪把数据拉到一个对象中，但我想让数据有一个更清晰的可视化。谢谢Phill，你给了我一个解决方案，这会让我重新开始，我感谢你的反馈。你知道我如何迭代从教程对象中的所有用户那里获取对象的所有数据吗？@Abraham我看到了你的另一个问题，不，我现在不知道。我想你需要问一下