Вы можете добавить строку вручную, и каждая строка будет в массиве "items"
items: [
{
occuGroup:'',
constType:'',
bfloorArea: 0,
cfloorArea: 0
},
],
Вот код, который я написал, чтобы получить Total
subTotal: function() {
var total = 0;
this.items.forEach(element => {
total += (element.bfloorArea);
});
return total;
},
Как мне это понять? благодаря
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));Кажется, вы - строка concat. Вам нужно будет преобразовать строку в int для суммирования.
this.items.forEach(element => {
total += parseInt(element.bfloorArea);
});
Я бы совмещал функции map и сокращения массива:
subtotal() {
return this.items
.map(({bfloorArea}) => bfloorArea)
.reduce((a, b) => a + b, 0)
}
Используя map таким образом, вы получаете новый массив, содержащий только значения bfloorArea, а с помощью reduce вы получаете общую сумму этих значений.
Надеюсь, это поможет!
Примечание. Если вам нужна общая сумма любого другого свойства, вы можете просто изменить «bfloorArea» на нужное свойство. Если свойство имеет не числовой тип, а строку, вы можете преобразовать его в число при сопоставлении:
.map(({propertyToCast}) => Number(propertyToCast))
Другое решение без использования деструктуризации объекта могло бы быть
return this.items.map(item => item.bfloorArea)
.reduce((prev, current) => prev + parseInt(current,10), 0);
Используйте правильный тип ввода
Хочу предложить другой вариант. Многие предлагали преобразовать строку из поля ввода, поскольку тип ввода по умолчанию - 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)
❗ Это также не позволит пользователю вводить текст в поле, для которого явно требуется число