Обрабатывать несколько выпадающих списков с помощью VueJS

Question

Я новичок в VueJs и хочу создать форму. Содержит вопросы с категорией и оценкой. Моя цель - взять оценку каждого вопроса и его категории, и все вопросы из категории «F» будут иметь оценку F (что будет происходить из суммы оценок), а все вопросы из категории «H» будут иметь оценку H. Вот моя работа до сих пор. Заранее благодарю за помощь!

https://codepen.io/dparanou/pen/zYGPexa

<select v-bind:id="question.id" @change="onChange($event, question.id, question.category)">
 <option disabled selected>--</option>
 <option v-for="n in question.answers" :value="n">{{n}}</option>
</select>

<span>Score F: {{fScore}}</span>
<span>Score H: {{hScore}}</span>

А вот и мой JS файл

data: {
    fScore: 0,
    hScore: 0,
},
methods: {
    onChange(event, id, cat) {
      num = event.target.value;
      console.log("id: "+ id + ", category: " + cat + ", score: " + num);
      if(cat == "F") {
        this.fScore += num;
        console.log(this.fScore);
      } else {
        this.hScore += num;
      }
    }
  }

Answer 1

Нужно было только преобразовать событие в целое число!

onChange(event, id, cat) {
      var num = parseInt(event.target.value);
      if(cat == "F") {
        this.fScore += num;
      } else {
        this.hScore += num;
      }
    }