es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue.js: campo de entrada autocompletado

02 Aug, 2023 Programación

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="">
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    <template>
  <div>
    <input type="number" v-model="totalPrice" class="price-input mt-3" placeholder="precio total" required="">
    <br>
    <input type="number" v-model="percentage" class="price-input mt-3" placeholder="porcentaje" required="">
    <input type="number" v-model="paid" class="price-input mt-3" placeholder="pagado" required="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalPrice: 0,
      percentage: 0,
      paid: 0
    };
  },
  computed: {
    calculatedPercentage() {
      if (this.totalPrice === 0) return 0;
      return (this.paid / this.totalPrice) * 100;
    },
    calculatedPaid() {
      if (this.totalPrice === 0) return 0;
      return (this.percentage / 100) * this.totalPrice;
    }
  },
  watch: {
    calculatedPercentage(value) {
      this.percentage = value;
    },
    calculatedPaid(value) {
      this.paid = value;
    }
  }
};
</script>

    En este ejemplo, los valores totalPrice, percentage y paid se almacenan en el objeto de datos del componente. Las propiedades calculadas calculatedPercentage y calculatedPaid 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 de percentage o paid según cuál esté editando el usuario. Si el usuario selecciona un valor para el campo de entrada paid, se utiliza la propiedad calculada calculatedPercentage para calcular el porcentaje y actualizar el campo de entrada percentage. Si el usuario selecciona un valor para el campo de entrada percentage, se utiliza la propiedad calculada calculatedPaid para calcular el monto pagado y actualizar el campo de entrada paid.

    Ten en cuenta que esta es solo una implementación de ejemplo y es posible que necesites personalizarla según tus requisitos específicos.

Comments are closed.