Vue: [Vue warn]: Error in render: "TypeError: product.data is not a function"

Question

我正在尝试从云 Firestore 数据库中检索数据。但是我得到一个错误，

[Vue warn]: Error in render: "TypeError: product.data is not a function"

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

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

如果我不在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>

Answer 1

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

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

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

Answer 2

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

变化：

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

收件人：

<td>{{ product.name }}</td>
<td>{{ product.price }}</td>

这应该可以解决它，因为您正在遍历产品列表（其中的内容不明确），所以我建议您应该更改：

<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>

收件人：

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

Vue: [Vue warn]: Error in render: "TypeError: product.data is not a function"

Vue: [Vue warn]: Error in render: "TypeError: product.data is not a function"

information-retrieval

firebase

vue.js

vue-component

google-cloud-firestore