Параметр функций не работает внутри цикла

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

Это прекрасно работает.

Но я добавляю параметр условие условия. Это ведет себя странно. Он возвращает неудержимую петлю, которая повторяет все данные.

  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() является асинхронным и возвращает обещание, см. здесь . Делая

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 объект data вашего компонента И возвращающий в вашей функции totalExpenseByType(expense_type) то же самое свойство 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()
    .....

, если * expense_type поле типа Array. В этом случае вам следует использовать синтаксис «членство в массиве», см. https://firebase.google.com/docs/firestore/query-data/queries#array_membership