函数参数在循环内不起作用

Question

我在一个应用程序中使用 Vue js 和 Firebase。我创建了一个检索每月费用的函数。

totalExpenseByType(){
        db.collection('expenses').where("created_month", "==", moment().format('MM-YYYY'))

        .get()
        .then(snapshot => {
              var totalExpensesOfThisMonth = 0;
              snapshot.forEach(doc => {
                 totalExpensesOfThisMonth += Number(doc.data().expense_amount)
              })
              this.expenses_of_this_month = totalExpensesOfThisMonth;

         })
         return this.expenses_of_this_month;
      } 

效果很好。

但是我添加了一个参数 where 条件。它的行为很奇怪。它返回不可停止的循环，重复所有数据。

  totalExpenseByType(expense_type){
    db.collection('expenses').where("created_month", "==", moment().format('MM-YYYY'))
                             .where("expense_type", "==", {"expense_type": expense_type})
    .get()
    .then(snapshot => {
          var totalExpensesOfThisMonth = 0;
          snapshot.forEach(doc => {
             totalExpensesOfThisMonth += Number(doc.data().expense_amount)
          })
          this.expenses_of_this_month = totalExpensesOfThisMonth;

     })
     return this.expenses_of_this_month;
  }

这是我用于显示数据的代码

  <template slot="items" slot-scope="props">
            <td class="text-xs-left">{{ props.item.expense_type }}</td>
            <td class="text-xs-left">{{ totalExpenseByType(props.item.expense_type) }}</td>
            <v-btn fab dark small color="pink" @click="removeExepenseType(props.item.id)">
               <v-icon dark>remove</v-icon>
            </v-btn>
  </template>

数据结构

created_month: "09-2018"
expense_amount: "600"
expense_title:"Employee Salary"   
expense_type:"Employee Expense"    
timestamp:1536126964353

Answer 1

根据您对数据结构的最新更新进行更新...：

按照我最初的建议去做：

totalExpenseByType(expense_type){
       db.collection('expenses')
       .where("created_month", "==", moment().format('MM-YYYY'))
       .where("expense_type", "==", expense_type)
       .get()
        .....

那么，你还有另一个问题。 get() 方法是异步的并返回一个承诺，请参阅here。通过做

totalExpenseByType(){
        db.collection('expenses').where("created_month", "==", moment().format('MM-YYYY'))

        .get()
        .then(snapshot => {
              var totalExpensesOfThisMonth = 0;
              snapshot.forEach(doc => {
                 totalExpensesOfThisMonth += Number(doc.data().expense_amount)
              })
              this.expenses_of_this_month = totalExpensesOfThisMonth;

         })
         return this.expenses_of_this_month;
      } 

您在 promise 解决之前返回了 this.expenses_of_this_month 的值，因此它没有返回正确的值。

此外，我认为您误解了 Vue 的反应系统：在您的代码中，您（如果我是正确的，假设 this 是您的 Vue 实例）将 totalExpensesOfThisMonth 的值分配给 expenses_of_this_month 的属性您的组件的 data 对象并在您的 totalExpenseByType(expense_type) 函数中返回相同的 data 对象属性（不正确，请参见上文）。

---

在您的最后一条评论之后更新：是一个值为“expense_type:"Employee Expense"的字符串

既然你提到它是一个值为 "expense_type:"Employee Expense" 的字符串，你应该这样做：

db.collection("test").where("expense_type", "==", '"expense_type:"Employee Expense"').get().then()

或者，如果要删除外部双引号：

db.collection("test").where("expense_type", "==", 'expense_type:"Employee Expense').get().then()

---

在您更新数据结构后更新：

如果我理解正确，您将expense_type 存储为对象。

在这种情况下，您的查询应该如下：

db.collection('expenses').where("expense_type.expense_type", "==", "Employee Expense").get().then()

---

上一个答案，被丢弃

我觉得应该是这样的：

totalExpenseByType(expense_type){
   db.collection('expenses')
   .where("created_month", "==", moment().format('MM-YYYY'))
   .where("expense_type", "==", expense_type)
   .get()
    .....

除非expense_type 字段是数组类型。在这种情况下，您应该使用“数组成员”语法，请参阅https://firebase.google.com/docs/firestore/query-data/queries#array_membership