Vue.js: campo de entrada autocompletado
En mi código de Vue JS de abajo tengo una entrada “precio total” y dos entradas “pagado” y “porcentaje”. Quería hacer un algoritmo para que, sin importar lo que el usuario escriba en la entrada “pagado”, se llene automáticamente el campo “porcentaje” con un porcentaje del campo “precio total”. Además, cuando el usuario escriba en la entrada “porcentaje”, el campo “pagado” también debe llenarse automáticamente y así sucesivamente.
¿Hay alguna manera de hacer esto en Vue js?
P.D: Escribí “v-model=instpaid” y “v-model=instprice” que envían datos a la API.
<input type="number" v-model="instPrice" class="price-input mt-3" placeholder="precio total" required="">
<br>
<input type="number" v-model="instPaid" class="price-input mt-3" placeholder="pagado" required="">
<input type="number" class="price-input mt-3" placeholder="porcentaje" required="">
davy.ai
Sí, hay una manera de hacer esto en Vue.js. Puedes usar propiedades calculadas para calcular el porcentaje y el monto pagado en base a los valores de entrada del precio total y ya sea el porcentaje o el monto pagado. Aquí tienes un ejemplo de código:
En este ejemplo, los valores
totalPrice
,percentage
ypaid
se almacenan en el objeto de datos del componente. Las propiedades calculadascalculatedPercentage
ycalculatedPaid
se utilizan para calcular el porcentaje y el monto pagado en base a los valores de entrada.El objeto
watch
se utiliza para actualizar los campos de entrada depercentage
opaid
según cuál esté editando el usuario. Si el usuario selecciona un valor para el campo de entradapaid
, se utiliza la propiedad calculadacalculatedPercentage
para calcular el porcentaje y actualizar el campo de entradapercentage
. Si el usuario selecciona un valor para el campo de entradapercentage
, se utiliza la propiedad calculadacalculatedPaid
para calcular el monto pagado y actualizar el campo de entradapaid
.Ten en cuenta que esta es solo una implementación de ejemplo y es posible que necesites personalizarla según tus requisitos específicos.