Vue：[Vue 警告]：渲染错误：“TypeError：product.data 不是函数”答案

【问题标题】：Vue: [Vue warn]: Error in render: "TypeError: product.data is not a function"Vue：[Vue 警告]：渲染错误：“TypeError：product.data 不是函数”
【发布时间】：2020-10-12 12:46:04
【问题描述】：

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

[Vue 警告]：渲染错误：“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>

【问题讨论】：

你在使用 jQuery + Vue 吗？ $('#edit').modal('show') ，好吧，这不是一个好方法。无论如何，如果您将 doc.data 推送到您的 products 数组，这意味着您正在将数据对象传递给它，所以我想您只需将 product.data().name 更改为 product.name，这是基于您的代码的假设。

标签： firebase vue.js google-cloud-firestore vue-component information-retrieval

【解决方案1】：

我必须同意@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>

【讨论】：

谢谢，我将使用 product.name 和 product.price。
太棒了。如果这解决了您的问题，请标记为已回答

【解决方案2】：

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

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

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

【讨论】：