Weekly Vue News #73 — Pass Custom Arguments to Event Handler Method
Published at Dec 26, 2022, 2:00 PM
Hi 👋
I deleted my account at Revue as they will shut down in January 2023.
This is the first issue that is sent via my custom-built newsletter solution:
I store the subscriber list on Supabase, manage the content as Markdown files on my Nuxt 3-powered newsletter website and send the emails using Amazon SES.
I plan to write a blog post about how I replaced Revue with my custom-built solution.
Have a nice week ☀️
Vue Tip: Pass Custom Arguments to Event Handler Method
In Vue, we use the v-on (typically shortened with the @ symbol) to listen to DOM events and run some JavaScript code when triggered.
We can use inline handlers or method handlers if the logic for the event handler is more complex:
<script setup>
const name = ref('Vue.js')
const greet = (event) => {
alert(`Hello ${name.value}!`)
if (event) {
alert(event.target.tagName)
}
}
</script>
<template>
<button @click="greet">Greet</button>
</template>Sometimes we need to pass custom arguments to the method and access the original DOM event:
<script setup>
const name = ref('Vue.js')
const greet = (event, name) => {
alert(`Hello ${name.value}!`)
if (event) {
alert(event.target.tagName)
}
}
</script>
<template>
<button @click="greet($event, “Michael”)">Greet</button>
</template>The original DOM event is accessible via the unique $event variable. Custom arguments can be added by calling the method in an inline handler instead of directly binding it to a method name.
Curated Vue Content
👉🏻 Feature-rich portal plugin for Vue 3.
👉🏻 “A Portal Component for Vue 3, to render DOM outside of a component, anywhere in the document.”
👉🏻 It’s all happening 25 & 26 January
👉🏻 Get to know Quasar, Vuetify 3, Nuxt 3, Pinia, Vite, Vitest, Volar, Vue.js, Typescript, VueUse and more!
👉🏻 Evan You is hosting the keynote for Vue.js Nation.
👉🏻 Register free!
👉🏻 This drag-and-drop solution includes packages for React, Svelte, Vue, Solid and vanilla JavaScript.
Quote of the week
JavaScript Tip: A function that throws an error if a required parameter is missing
Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.
We can use this approach to write a function that throws an error if a required parameter is missing:
const isRequired = () => {
throw new Error('Parameter is required!')
}
const foo = (bar = isRequired()) => {
console.log(bar)
}
foo() // throws the isRequired error
foo(undefined) // throws the isRequired error
foo(false) // logs "false"
foo(null) // logs "null"
foo('Test') // logs "true"Curated Web Development Content
👉🏻 A collection of 70 web-based tools that can generate pure CSS without the need for JavaScript or external libraries.
👉🏻 Categories include property generators, animations, backgrounds, typography, loaders, and layouts.
👉🏻 It allows users to run GitHub Actions locally.
👉🏻 It allows developers to receive fast feedback and features a local task runner.
👉🏻 It is available on Windows, macOS, and Linux.
Originally published at https://weekly-vue.news.
