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

时间:2018-09-05 08:06:34

标签: javascript loops firebase vue.js firebase-realtime-database

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

z = x-y or jump if y>x

这很好用。

但是我添加了一个参数where条件。它表现得很奇怪。它返回不可重复的循环,重复所有数据。

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

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

  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>

1 个答案:

答案 0 :(得分:1)

根据有关数据结构的最新更新进行更新...

按照我最初的建议做:

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

然后,您还有另一个问题。 get()方法是异步的,并返回一个Promise,请参见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;
      } 

您将在承诺尚未解决之前返回this.expenses_of_this_month的值,因此不会返回正确的值。

此外,我认为您对Vue的反应性系统有误解:在您的代码中,您(如果我假设this是您的Vue实例是正确的)将totalExpensesOfThisMonth的值分配给{组件的expenses_of_this_month对象的{1}}属性,并在您的data函数中返回相同的totalExpenseByType(expense_type)对象属性(错误地参见上面)。


根据您在下面的最后一条评论进行更新:是一个字符串,其值为“ expense_type:“ Employee Expense”

由于您提到它是一个值为“ expense_type:” Employee Expense“的字符串,因此应执行以下操作:

data

或者,如果要删除外部双引号:

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() ..... 字段是数组类型。在这种情况下,您应该使用“数组成员身份”语法,请参见https://firebase.google.com/docs/firestore/query-data/queries#array_membership