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.

  • es.davy.ai/
  • Programación /
  • Vue 3 obtén el valor de una función del evento @click para utilizarlo en el cálculo de algunas operaciones matemáticas. – TypeScript

Vue 3 obtén el valor de una función del evento @click para utilizarlo en el cálculo de algunas operaciones matemáticas. – TypeScript

21 Jul, 2023 Programación

Estoy creando una calculadora de propinas usando Vue.js 3 y TypeScript. Tengo 5 botones con algunos valores, quiero usar sus valores para calcular un total, ¿cómo llamo a la función tipPercentage para obtener un único valor numérico que pueda usar para calcular el total y también no puedo sumar bill ya que es un tipo Ref y no un tipo number.
Estoy usando Vue 3.2 script setup y TypeScript, abierto a soluciones en JavaScript.
Imagen de la aplicación de calculadora de propinas

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
<script lang="ts" setup="">
import { ref } from 'vue'
let tips = [
  { id: 1, percent: 5},
  { id: 2, percent: 10},
  { id: 3, percent: 15},
  { id: 4, percent: 25},
  { id: 5, percent: 50},
]
const bill = ref(0)
const tipPercentageValue = (percentValue: number) => percentValue
const total = bill.value + bill.value * tipPercentageValue(percentValue)
</script>

<!-- language: lang-html -->
<h3>Bill</h3>
<input class="bill-input" type="number" v-model="bill" placeholder="ingresar monto">
<h3>Seleccionar % de propina</h3>
<div class="tip-percent-buttons">
  <button class="percent-btn" v-for="tip in tips" :key="tip.id" @click="tipPercentageValue(tip.percent)" :value="tip.percent">
    {{ tip.percent }}%
  </button>
</div>


“`

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para llamar a la función tipPercentage y obtener un único valor numérico, puedes agregar una propiedad computada que lo calcule en función del valor de porcentaje de propina seleccionado. Aquí tienes un ejemplo de código:

    <template>
  <div>
    <h3>Cuenta</h3>
    <input class="bill-input" type="number" v-model="bill" placeholder="ingresa la cuenta">
    <h3>Seleccionar % de propina</h3>
    <div class="tip-percent-buttons">
      <button class="percent-btn" v-for="tip in tips" :key="tip.id" @click="tipPercentageValue = tip.percent">
        {{ tip.percent }}%
      </button>
    </div>
    <h3>Porcentaje de propina: {{ tipPercentage }}</h3>
    <h3>Total: {{ total }}</h3>
  </div>
</template>

<script lang="ts" setup="">
import { ref, computed } from 'vue'

let tips = [
  { id: 1, percent: 5},
  { id: 2, percent: 10},
  { id: 3, percent: 15},
  { id: 4, percent: 25},
  { id: 5, percent: 50},
]

const bill = ref(0)
const tipPercentageValue = ref(0)

const tipPercentage = computed(() => tipPercentageValue.value / 100)

const total = computed(() => bill.value + bill.value * tipPercentage.value)
</script>

    En este código, creamos una propiedad computada tipPercentage que calcula el valor del porcentaje de propina en función del botón seleccionado. También usamos un valor ref para tipPercentageValue para poder actualizarlo cuando se hace clic en un botón.

    Finalmente, creamos una propiedad computada total que calcula el importe total en función de la cuenta y el valor del porcentaje de propina. Ten en cuenta que, dado que bill es de tipo ref<number>, debemos acceder a su valor utilizando bill.value al calcular el total.

Comments are closed.