joe, 1 month ago

I have been spending a lot of the past month working on a Vue / Firebase side project, so this is going to be a fairly short post. I recently discovered that there are modifiers for v-model in Vue. I wanted to take a moment to cover what they do.

.lazy

Instead of the change being reflected the moment you make it, this modifier makes it so that the change syncs after change events.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

.number

This modifier uses parseFloat() to cast the value as a number. This is a good one to use with inputs that you are already using type=”number” with.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

.trim

This one is pretty straight-forward. It simply trims any extra whitespace off of the string.

See the Pen by Joe Steinbring (@steinbring)
on CodePen.

https://jws.news/2024/v-model-modifiers-in-vue/

#DataBinding #JavaScript #VueJs