Firebase Vue:[Vue warn]：渲染中出现错误："；TypeError:product.data不是函数；

我正在尝试从CloudFireStore数据库检索数据。 但我犯了个错误

[Vue warn]：呈现错误：“TypeError:product.data不是 功能“

我想在表中显示每个产品的名称和价格

但我不知道为什么会出现这个问题。 所以我希望有人能帮我

如果在vue模板中不使用data（），则可以按预期查看所有数据

<template>
 <h3>Product List</h3>
            <div class="table-responsive">
              <table class="table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Price</th>
                  <th>Modify</th>
                </tr>
              </thead>

              <tbody>
                <tr v-for="(product, index) in products" :key="index">
                  <td>{{ product.data().name }}</td>
                  <td>{{ product.data().price }}</td>
                  <td>
                    <button @click="editProduct(product)" class="btn btn-primary">Edit</button>
                    <button @click="deleteProduct(product.id)" class="btn btn-danger">Delete</button>
                  </td>
                </tr>
              </tbody>
            </table>
            </div>
</template>
<script>

import { fb, db } from '../firebase'
 

export default {
  name: 'Products',
  props: {
    msg: String
  },
  data () {
    return {
      products: [],
      product: {//object
        name: null,
        price: null
      }
    }
  },
  methods: {
    editProduct(product) {
      $('#edit').modal('show') 
    },
    readData() {
      
      db.collection("products").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          this.products.push(doc.data());
        });
      });
    },
    
    saveData() {
      // Add a new document with a generated id.
      db.collection("products").add(this.product)
      
      .then((docRef) =>  {
          console.log("Document written with ID: ", docRef.id);
          this.product.name = "",
          this.product.price = ""
          this.readData()
      })
      .catch(function(error) {
          console.error("Error adding document: ", error);
      });
    }
  },
  created() {
      this.readData();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

产品清单
名称
价格
修改
{{product.data（）.name}
{{product.data（）.price}}
编辑
删除
从“../firebase”导入{fb，db}
导出默认值{
名称：'产品'，
道具：{
msg:String
},
数据（）{
返回{
产品：[]，
产品：{//对象
名称：空，
价格：零
}
}
},
方法：{
编辑产品（产品）{
$（“#编辑”）.modal（'show'）
},
readData（）{
db.collection（“products”）.get（）然后（（querySnapshot）=>{
querySnapshot.forEach（（doc）=>{
this.products.push（doc.data（））；
});
});
},
saveData（）{
//添加具有生成的id的新文档。
db.集合（“产品”）.添加（本产品）
。然后（（docRef）=>{
console.log（“使用ID编写的文档：”，docRef.ID）；
this.product.name=“”，
this.product.price=“”
这个文件名为readData（）
})
.catch（函数（错误）{
console.error（“添加文档时出错：”，错误）；
});
}
},
创建（）{
这是readData（）；
}
}

您的代码非常混乱。 我不明白为什么你们要调用产品上的数据方法，为什么你们的数据中有产品和产品，而你们只需要一个。 所以我假设Vue将for循环中的产品和数据中的产品对象混合在一起。 因此，将for循环中的产品名称更改为其他名称：

v-for="(item,index) in products"

---

或者更改数据中的product（如果可以，请删除它），因为其中没有任何数据方法。

您的代码非常混乱。 我不明白为什么你们要调用产品上的数据方法，为什么你们的数据中有产品和产品，而你们只需要一个。 所以我假设Vue将for循环中的产品和数据中的产品对象混合在一起。 因此，将for循环中的产品名称更改为其他名称：

v-for="(item,index) in products"

---

或者更改数据中的product（如果可以，请删除它），因为其中没有任何数据方法。

我必须同意@Mostafa，命名约定不是很容易理解。您的错误告诉您正在尝试调用一个不是函数或数据中不存在的函数

更改：

<td>{{ product.data().name }}</td>
<td>{{ product.data().price }}</td>

{{product.data（）.name}
{{product.data（）.price}}

致：

{{product.name}
{{product.price}}

这应该可以解决问题，因为您正在迭代产品列表（其中的一个不清楚），所以我建议您应该更改：

<tr v-for="(product, index) in products" :key="index">
  <td>{{ product.name }}</td>
  <td>{{ product.price }}</td>
  <td>
    <button @click="editProduct(product)" class="btn btn-primary">Edit</button>
    <button @click="deleteProduct(product.id)" class="btn btn-danger">Delete</button>

{{product.name}
{{product.price}}
编辑
删除

致：

{{productItem.name}
{{productItem.price}}
编辑
删除

我必须同意@Mostafa的说法，因为命名约定不太容易理解。您的错误告诉您正在尝试调用一个不是函数或数据中不存在的函数

更改：

<td>{{ product.data().name }}</td>
<td>{{ product.data().price }}</td>

{{product.data（）.name}
{{product.data（）.price}}

致：

{{product.name}
{{product.price}}

这应该可以解决问题，因为您正在迭代产品列表（其中的一个不清楚），所以我建议您应该更改：

<tr v-for="(product, index) in products" :key="index">
  <td>{{ product.name }}</td>
  <td>{{ product.price }}</td>
  <td>
    <button @click="editProduct(product)" class="btn btn-primary">Edit</button>
    <button @click="deleteProduct(product.id)" class="btn btn-danger">Delete</button>

{{product.name}
{{product.price}}
编辑
删除

致：

{{productItem.name}
{{productItem.price}}
编辑
删除

您正在使用jQuery+Vue吗<代码>$（“#编辑”）.modal（'show'），这不是一个好方法。无论如何，如果您将doc.data推送到产品数组中，这意味着您正在将数据对象传递给它，因此我想您只需将

product.data（）.name

更改为

product.name

，这是基于您的代码的假设。您使用的是jQuery+Vue吗<代码>$（“#编辑”）.modal（'show'），这不是一个好方法。无论如何，如果您将doc.data推送到products数组，这意味着您正在将数据对象传递给它，因此我想您只需将

product.data（）.name

更改为

product.name

，这是基于您的代码的假设。谢谢，我将使用product.name和product.price.Great。如果这解决了您的问题，请您标记为回答谢谢，我将使用product.name和product.price.Great。如果这解决了你的问题，你能标记为已回答吗