Tengo este método vue que toma los valores de entrada del usuario y genera un objeto json antes de realizar la solicitud de colocación de axios. Mi problema es que el objeto json generado devuelve números como cadenas, y eso rompe mi respuesta API. Mi objetivo es que mi objeto json sea así:
{ "test":{ "test1":{ "test2":2, "test3": 2 } } }
En el código actual, el objeto json regresa así (2 como cadena):
{ "test":{ "test1":{ "test2":"2", "test3":"2" } } }
Este es mi método vue:
generateJson() { const values = {} this.inputs.forEach((item) => { values[item.key] = item.value }) const jsonFile = { test: { test1: values } } const testUrl = '*URL placeholder*' axios.put(testUrl, jsonFile).then((response) => { console.log(response.data) }) } }
Este es el campo de entrada del usuario:
<button @click.prevent="showInput">+</button> <div v-for="(input, k) in inputs" :key="k"> <input v-model="input.key" type="text" @change="getKey($event)" /> <input v-model="input.value" type="text" @change="getValue($event)" /> </div> </div> <button @click.prevent="generateJson">Submit</button>
Y aquí están los otros dos métodos que uso para obtener el valor de la entrada:
data() { return { tempkey: '', tempValue: '', } } getKey(e) { this.tempkey = e.target.value }, getValue(e) { this.tempValue = e.target.value },
¿Alguien puede aconsejarme qué puedo hacer para que esto funcione? Muchas gracias.
Las entradas de tipo 'texto' devolverán una cadena. Intente cambiar el tipo de entrada a número. De lo contrario, podría hacer esto (con tipo de texto):
getKey(e) { this.tempkey = parseInt(e.target.value) } getValue(e) { this.tempValue = parseInt(e.target.value) }