Question

我正在尝试从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>

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

Answer 2

您的代码非常混乱。我不明白您为什么要在产品上调用数据方法，为什么当您只需要一种产品时就在数据中包含产品。所以我假设Vue在您的for循环中混合产品，并在数据中混合产品对象。因此，可以将for循环中的产品名称更改为其他名称：

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

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

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

2 个答案: