Vue 3 从函数 @click 事件中获取值以用于计算一些数学。 -打字稿

Question

我正在使用 vuejs 3 和打字稿制作一个小费计算器。我有 5 个带有一些值的按钮，我想使用它们的值来计算总数，如何调用函数 tipPercentage 以便它给我一个单一的数值，我可以用它来计算总数，而且我不能添加bill 因为它是 Ref 类型而不是数字类型。我正在使用 vue 3.2 脚本设置和打字稿，打开 javascript 解决方案 image of tip calculator app

<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: number  = ref(0)
let  tipPercentageValue = (percentValue: number) => percentValue
const total: number = bill+ bill*tipPercentageValue(percentValue)
</script>

<h3>Bill</h3>
   <input class="bill-input" type="number" v-model="bill" placeholder="enter bill" />
    <h3>Select Tip %</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>
 </template>

Answer 1

您的代码在使用 ref 时遇到了一些问题。如果您在 <script> 中使用 ref 并且想要分配一个新值，则需要添加 .value https://v3.vuejs.org/guide/reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs

此外，您的 tipPercantageValue 函数什么都不做。

  const selectedPercentage = ref(0)
  const total = ref(0)

  function percentageSelected(percentage: number) {
    selectedPercentage.value = percentage
    total.value = bill.value+ bill.value*selectedPercentage.value
  }

像这样 total 和 bill 是被动的。然后使用percentageSelected函数作为@click函数

如果您希望百分比采用 'correct' 格式，请添加 const computedPercantage = computed(() => selectedPercentage.value/100) 并像

一样使用它

function percentageSelected(percentage: number) {
    selectedPercentage.value = percentage
    total.value = bill.value+ bill.value*computedPercantage.value
  }

Vue 3 从函数 @click 事件中获取值以用于计算一些数学。 -打字稿

Vue 3 get value from function @click event to use to calculate some math. - typescript

typescript

vue.js

vue-composition-api

vite