N
Nuxt•2mo ago
AD007xD

Help with v-on functions

I have a button and when i click that, I need to call the function foo and pass 45 as an argument.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @AD007xD. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle a button click event and call a function with an argument in Nuxt/Vue, you can use the v-on directive (or its shorthand @). Here's how you can implement it: 
<template>
  <UButton @click="foo(45)">Click me</UButton>
  <!-- or using the longer syntax -->
  <button v-on:click="foo(45)">Click me</button>
</template>

<script setup>
function foo(value) {
  console.log('Function called with value:', value);
  // Your function logic here
}
</script>
<template>
  <UButton @click="foo(45)">Click me</UButton>
  <!-- or using the longer syntax -->
  <button v-on:click="foo(45)">Click me</button>
</template>

<script setup>
function foo(value) {
  console.log('Function called with value:', value);
  // Your function logic here
}
</script>
The @click directive (shorthand for v-on:click) will trigger the foo function with the argument 45 whenever the button is clicked. If you're using Nuxt UI, you can also use the loading features with your button as shown in the Nuxt UI documentation: 
<script setup>
function foo(value) {
  console.log('Function called with value:', value);
  return new Promise(resolve => setTimeout(resolve, 1000)); // Example async operation
}
</script>

<template>
  <UButton loading-auto @click="() => foo(45)">
    Click me
  </UButton>
</template>
<script setup>
function foo(value) {
  console.log('Function called with value:', value);
  return new Promise(resolve => setTimeout(resolve, 1000)); // Example async operation
}
</script>

<template>
  <UButton loading-auto @click="() => foo(45)">
    Click me
  </UButton>
</template>
This will automatically show a loading state while your function is processing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@699225692918906900> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?