View profile

Weekly Vue.js News - #42 - Create custom v-model modifier

Michael Hoffmann
Michael Hoffmann
Hi ๐Ÿ‘‹
This weekโ€™s Vue tip is about creating custom v-model modifiers.
Additionally, I published my first eBook called โ€œ27 helpful tips for Vue developersโ€.
I hope you will enjoy this weeksโ€™ issue and if you have any feedback, please get in touch with me on Twitter -ย @mokkapps or via email:ย
Have a great week โ˜€๏ธ

Vue Tip: Create custom v-model modifier
v-model has some built-in modifiers like .lazy, .number and .trim. But in some cases, you might need to add your own custom modifier.
In this simple demo, I want to create a custom modifier called no-underscore that removes all underscores _ from an input:
Inside our component we can access the modifier via the modelModifiers prop. We manipulate the value if an input event is fired and the modifier is available:
If your v-model binding includes both modifiers and argument then the generated prop name will be arg + โ€œModifiersโ€:
Vue Articles
Generically Typed Vue Components with Composition API
Web Development Articles & Tweets
Michael Hoffmann
๐Ÿ’ก JavaScript Tip:

URLSearchParams provides utility methods to work with the query string of a URL
Four Eras of JavaScript Frameworks
How Removing Staging Environments Can Improve Your Deployments
Why I don't miss React: a story about using the platform
Quote of the week
Tools & Misc
Michael Hoffmann
๐Ÿ“• Porting Zelda Classic to the Web

๐Ÿ˜ฎ Connor ported Zelda Classic as PWA to the web using WebAssembly.
โœ๐Ÿป Check out his deeply technical article
๐ŸŽฎ Play the game here:
๐Ÿ› ๏ธ Pyscript: Run Python in Your HTML
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther StraรŸe 19, 81375 Munich, Germany