Vue 2 - как рассчитать сумму из целочисленных значений v-моделей

Question

Я использую nuxt 2.8.1

У меня есть 100 входов.Все входные данные являются числами

Я хочу вычислить в сумме все числа, чтобы получить общее число

Я попробовал это

computed: {
     total() {
       return this.form.one + this.form.two
     }
}

что я ожидал

5 + 5 = 10

какой вывод получится

5 + 5 = 55

, если я не поставлю значение в дварезультат 5null

я не понимаю, почему его

Answer 1

Он рассматривает их как строки и объединяет их, как вы видите, поэтому вы должны использовать объект Number для приведения их к целым числам, таким как:

 return Number(this.form.one) + Number(this.form.two)

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

 return Object.values(this.form).reduce((a,c)=>{
       return a+Number(c);                 
       },0)

Пример:

let form = {
  one: 45,
  two: 5,
  three: 7
}

let sum = Object.values(form).reduce((a, c) => {
  return a + Number(c);
}, 0)

console.log(sum)

Answer 2

Поскольку ваш параметр является формой, я думаю, это связано с пользовательским вводом.Тогда вы также можете решить эту проблему с помощью модификатора (https://vuejs.org/v2/guide/forms.html#number)

HTML

<input v-model.number="form.one" ></input>
<input v-model.number="form.two" ></input>

JS (так же, как это было раньше, или с методом уменьшения)

computed: {
     total() {
       return this.form.one + this.form.two
     }
}