- [Instructor] View includes several directive modifiers
that provide shorthand syntax for adding certain behaviors.
For example, if we look at the deck name property
in view DevTools,
we can see that the bound value increases in length
if I just hit the Space bar a few times.
We might want to write some code in a submit event handler
that trims that string before sending it to the server.
But we have a convenient alternative in the trim modifier
which is basically as easy as just typing the word trim
in our template.
So we'll do that right after the V model for deck name.
So this becomes V-model.trim.
If I go back and refresh,
and if you watch deck name now in the view DevTools,
you can see that no matter how many times
I press the Space bar,
the bound value in our data object doesn't change.
But of course this only handles leading
or trailing white space.
So if I start typing out here, I'll get a long string
with that space in the middle.
Again, it's nice that View keeps our form fields
and our data in sync with every keystroke.
It does that by handling the native input event.
But what if we didn't want that?
What if we only wanted to update our data property
after the user has finished typing
and then moved the focus away from that field?
We can tell you to handle the change event
instead of the input event, by adding the lazy modifier.
So if we do V-model.lazy equals deck description
then you can see that typing in this text area,
has no effect on the value we see in the DevTools
until I hit Tab.
Next, the category ID values are treated as strings
by the browser.
You can see that if I select biology,
say the value for category ID is now the string three.
But it may be helpful at times
to automatically cast those to integers.
That can be accomplished with the number modifier.
So if I change this to the V-model.number,
equals category ID,
when I refresh and select biology again,
I now have three as a number type.
Other modifiers exist for use with event handlers.
The one that I use the most
is probably the prevent modifier.
So if I were to add a V on click or the shorthand version,
just @click to this submit button
and have it call a method named submit.
Recall that I would need to add a key down here
in our options for methods,
and then define the submit method.
For now let's just have it pop an alert that says
that we're submitting the form.
So now if I make some changes
and then I click the create button, it pops the alert,
but once I hit, okay the browser submits the form
and refreshes the page.
If I want it to prevent that default behavior
I could just do,
@click.prevent.
Now we can handle this submission however we want,
again, perhaps with an AJAX call and a client site update.
There are a few other modifiers
that will come in handy at times,
including stop for stopping event propagation,
self for detecting whether the target was this element
or a child element.
And once for limiting the handler to a single execution.
For now, we'll wrap up this chapter with a discussion
of View's computed properties feature
which is a great example of how powerful
its reactivity system is.