As in the Attached picture it not getting the total right.

Вы можете добавить строку вручную, и каждая строка будет в массиве "items"

items: [
  {
    occuGroup:'',
    constType:'',
    bfloorArea: 0,
    cfloorArea: 0
  },
],

Вот код, который я написал, чтобы получить Total

subTotal: function() {
  var total = 0;
  this.items.forEach(element => {
    total += (element.bfloorArea);
  });
  return total;
},

Как мне это понять? благодаря

1
Devin Y 21 Янв 2021 в 11:56

5 ответов

Лучший ответ

Проблема с вашим кодом в том, что вместо этого вы добавляете элементы в виде строки, вам нужен числовой тип.

subTotal: function() {
  return this.items.reduce((acc, ele) => {
    return acc + parseInt(ele.bfloorArea);
  }, 0);
},
function subTotal(items) {
  return items.reduce((acc, ele) => {
    return acc + parseInt(ele.bfloorArea);
  }, 0);
}

const items = [
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 0,
    cfloorArea: 0,
  },
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 4,
    cfloorArea: 0,
  },
  {
    occuGroup: "",
    constType: "",
    bfloorArea: 6,
    cfloorArea: 0,
  },
];

console.log(subTotal(items));
1
De C 21 Янв 2021 в 09:04

Кажется, вы - строка concat. Вам нужно будет преобразовать строку в int для суммирования.

this.items.forEach(element => {
    total += parseInt(element.bfloorArea);
  });
1
HW Siew 21 Янв 2021 в 09:02

Я бы совмещал функции map и сокращения массива:

subtotal() {
  return this.items
    .map(({bfloorArea}) => bfloorArea)
    .reduce((a, b) => a + b, 0)
}

Используя map таким образом, вы получаете новый массив, содержащий только значения bfloorArea, а с помощью reduce вы получаете общую сумму этих значений.

Надеюсь, это поможет!

Примечание. Если вам нужна общая сумма любого другого свойства, вы можете просто изменить «bfloorArea» на нужное свойство. Если свойство имеет не числовой тип, а строку, вы можете преобразовать его в число при сопоставлении:

.map(({propertyToCast}) => Number(propertyToCast))
1
Dani 21 Янв 2021 в 09:09

Другое решение без использования деструктуризации объекта могло бы быть

return this.items.map(item => item.bfloorArea)
    .reduce((prev, current) => prev + parseInt(current,10), 0);
1
Amaarrockz 21 Янв 2021 в 09:19

Используйте правильный тип ввода

Хочу предложить другой вариант. Многие предлагали преобразовать строку из поля ввода, поскольку тип ввода по умолчанию - string.

Вы не включили данные шаблона, поэтому я просто предполагаю, что вы на самом деле используете стандартное поле ввода, например (или что-то подобное)

<input v-bind="item.bFloorArea" />

Во Vue у вас уже есть встроенная опция для автоматического преобразования типа ввода как Number, поэтому ваш исходный код мог бы работать, если бы вы использовали что-то вроде

<input v-bind.number="item.bFloorArea" type="number" />

Обратите внимание на модификатор .number для привязки значений (из документации: https: / /vuejs.org/v2/guide/forms.html#number)


Это также не позволит пользователю вводить текст в поле, для которого явно требуется число

0
Pascal Lamers 21 Янв 2021 в 10:06
65823990