如何读入数据 doc.data()

Question

<template>
  <div>
    {{ id }}
    {{ title }}
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import 'firebase/firebase-firestore'
import { db } from '@/fdb'

export default {
  props: ['id'],
  data () {
    return {
      forms: [],
      form: {
        title: '',
        content: ''
      }
    }
  },
  async created () {
    const route = useRoute()
    const forminfo = db.collection('forms').doc(route.params.id)
    const doc = await forminfo.get()
    console.log(doc.data().title)
  }
}
</script>

我可以通过 console.log(doc.data()) 打印出标题

我试图通过模板中的 {{ title }} 阅读 doc.data() 但我无法阅读它。

如何从模板中读取 doc.data() 值？

---

已编辑

我通过参考firestore官方文档编辑了这个问题。

我查看了vue官方文档，但是和我读取存储在firestore中的数据不同。

Answer 1

以下应该可以解决问题。 但是，我建议您阅读 Vue.js模板语法和组件的介绍，以了解数据 object 和使用“Mustache”语法的文本插值。

<template>
  <div>
    {{ form.id }}
    {{ form.title }}
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import 'firebase/firebase-firestore'
import { db } from '@/fdb'

export default {
  props: ['id'],
  data () {
    return {
      forms: [],
      form: {
        title: '',
        content: '',
        id: ''
      }
    }
  },
  async created () {
    const route = useRoute()
    const forminfo = db.collection('forms').doc(route.params.id)
    const doc = await forminfo.get()
    console.log(doc.data().title)
    this.form.title = doc.data().title;
    this.form.id = doc.id;
  }
}
</script>