I have a button and when i click that, I need to call the function foo and pass 45 as an argument.
#Help with v-on functions
toxic veldt
mystic pastureBOT
Hi @toxic veldt. 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>
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>