MattB
3 months ago
441
2
Vue

How to input into array as numbers

Posted 3 months ago by MattB

I have a series of radio button inputs, each with a value assigned as a number, for example:

<td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=1>                                
                        </td>                           
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=2>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=3>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=4>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=5>
                        </td>

However, when they get entered into an array, they are input as strings and as such, I cannot do anything with the numbers such as add them up. How do I convert them to numbers (or am I doing this all wrong?)

questions: [
                {text: 'I have a short-term and /or a medium-term career vision and I understand what I need to achieve it', name: 'Q1.1'},
                {text: 'I have a long-term career vision and I understand what I need to achieve it', name: 'Q1.2'},
                {text: 'I can articulate my career vision in a succinct and compelling manner', name: 'Q1.3'},
                {text: 'I talk about my career vision to my manager /colleagues/ team/ network (and or anyone that will listen!!)', name: 'Q1.4'},
                {text: 'My career vision supports /fits into how I wish to live my life', name: 'Q1.5'}
                ],
            totalScores: [0, 0, 0, 0, 0],
                  
        }),
       methods: {
            onChange(event,index) {
              let data = event.target.value;              
              Vue.set(this.totalScores, index, data);             
          }
        },
        computed: {
            sumOfArray: function () {
                return this.totalScores.reduce(function(acc, val) { return acc + val; }, 0);
            }
        }

Please sign in or create an account to participate in this conversation.