Умножение значений с помощью vue js

У меня есть этот массив объектов.

[
 {
 "id":181,
 "user_id":"3",
 "order_details":    
    [
      {"id":164,
       "order_id":"181",
       "quantity":"1",
       "price":"5.00"
      }, 
      {"id":163,
       "order_id":"181",
       "quantity":"6",
       "price":"10.00"
      }

  ]
 }
]

Это товары для заказа из корзины. Я хочу рассчитать общую сумму для каждой детали заказа, используя price * quantity.

У меня есть эта функция в вычисляемом свойстве компонента.

total: function(){
  for (var i=0; i< this.invoice.length; i++){
     for(var j=0; j<this.invoice[i].order_details.length; j++){
        return this.invoice[i].order_details[j].price * this.invoice[i].order_details[j].quantity;
            }
      }
}

Это возвращает одинаковую сумму для всех элементов в order_details. Что мне не хватает? Это правильный способ сделать это в vue?

ОБНОВИТЬ

Мне нужно отобразить данные следующим образом:

          <tr v-for="item in order.order_details">
              <td>{{item.quantity}}</td>
              <td>{{item.product.price}}</td>
              <td>{{total}}</td>
          </tr>

Поэтому я ожидаю, что для каждой детали заказа функция должна запускаться и возвращать price * quantity

Пример вывода:

 ## Qty | Price | Total  
 ## 2     | 5         | 10    
 ## 3    | 5          | 15

javascript vuejs2
person Bernard 'Beta Berlin' Parah    schedule 10.01.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Разве у вас не должна быть переменная суммы, где вы суммируете все уровни элементов, например:

total: function(){
  var sum = 0
  for (var i=0; i< this.invoice.length; i++){
     for(var j=0; j<this.invoice[i].order_details.length; j++){
        sum += this.invoice[i].order_details[j].price * this.invoice[i].order_details[j].quantity;
            }
      }
   return sum
}

или вы можете использовать функцию reduce javascript чтобы получить это более кратким образом, следующим образом:

total: function(){
  return this.invoice.reduce(function(prevVal, inv){
     return prevVal + inv.order_details.reduce(function(sum, od){
         return sum + od.price * od.quantity
     }, 0)
  }, 0)
}

Отредактировано

Учитывая ваш пример кода, вы можете просто передать item в методе total и вернуть общее количество, как показано ниже:

  <tr v-for="item in order.order_details">
      <td>{{item.quantity}}</td>
      <td>{{item.product.price}}</td>
      <td>{{total(item)}}</td>  // or just {{item.quantity * item.product.price}} if it is that simple
  </tr>

JS

total: function(item){
   return item.price * item.quantity
}
person Saurabh    schedule 10.01.2017
comment
Я пробовал оба примера и по-прежнему получаю те же результаты... общее количество для первого элемента в массиве отображается для всех элементов списка. - person Bernard 'Beta Berlin' Parah; 10.01.2017
comment
Ожидаете ли вы массив на выходе, можете ли вы также предоставить образец вывода. - person Saurabh; 10.01.2017
comment
Я обновил вопрос о том, как я хочу отображать данные - person Bernard 'Beta Berlin' Parah; 10.01.2017
comment
Я использовал оба метода, и все они работали отлично! Вы были очень полезны, отвечая на мои вопросы о vue. Большое спасибо. - person Bernard 'Beta Berlin' Parah; 10.01.2017