sending vuejs data post request as array of ints instead of strings - vue.js

Question

I have 2 input boxes for weights and values, and I can then click a button to automatically create more. This part is working fine.
The problem now is that the server expects a JSON formdata request containing array of ints, rather than strings.
This is how the postdata should look like:
{"stuff": {"weights": [2, 5, 3], "values": [654, 23, 3]}}
This is what it ends up looking like:
{"stuff": {"weights": ["2", "5", "3"], "values": ["654", "23", "3"]}}
I have tried to search how to set data array type to int, how to save v-model as int, etc.
I believe this is all the relevant code:
<template>
..
<div v-for="(weight, index) in weights">
<div>
<label for="w">weight:</label>
<input v-model="weights[index]">
<label for="v">value:</label>
<input v-model="values[index]">
</div>
</div>
..
</template>
<script>
export default {
data () {
return {
weights: [],
values: []
}
},
methods: {
solve: function () {
var formData = {
stuff: {
weights: this.weights,
values: this.values
}
}
axios.post('http://localhost:8000/my/api/url', formData).then(response => {
console.log(response)
}).catch(e => {
console.log(e)
})
},
...
</script>

Answer 1

You can use parseInt to convert them:
export default {
data () {
return {
weights: [],
values: []
}
},
computed: {
formData() {
return {
stuff: {
weights: this.weights.map((x) => parseInt(x, 10),
values: this.values.map((x) => parseInt(x, 10)
}
}
}
},
methods: {
solve: function () {
axios.post('http://localhost:8000/my/api/url', this.formData).then(response => {
console.log(response)
}).catch(e => {
console.log(e)
})
},
...
I used a computed variable to make the API call code cleaner, but it would work the same in there. The extra argument 10 is important with parseInt, it ensures the integer is base 10 which could otherwise cause odd behavior.

Answer 2

You can use the .number modifier:
<input v-model.number="weights[index]">
But this allows non-integer numbers and strings (it can be an empty string if the input is empty, for example). For this reason, you should explicitly convert the weights to integers at the API call:
// You should validate the data first
var formData = {
stuff: {
weights: this.weights.map(x => parseInt(x, 10)), // Convert to integer
values: this.values.map(x => parseInt(x, 10))
}
}