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
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
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>
“`
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: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 valorref
paratipPercentageValue
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 quebill
es de tiporef<number>
, debemos acceder a su valor utilizandobill.value
al calcular el total.