Directive with arguments and modifiers in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind a click event using a directive with an argument.

Vue

<button v-on:[1]="handleClick">Click me</button>

Drag options to blanks, or click blank then click option'

Aclick

Bshow

Cbind

Dmodel

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-on for events

Omitting the event name argument

The v-on directive listens to DOM events. The argument click specifies the event type.

2fill in blank

medium

Complete the code to use a modifier that prevents the default action on a click event.

Vue

<a href="#" v-on:click.[1]="submitForm">Submit</a>

Drag options to blanks, or click blank then click option'

Aprevent

Bstop

Ccapture

Donce

Attempts:

3 left

💡 Hint

Common Mistakes

Using .stop which stops event propagation but not default action

Forgetting the dot before the modifier

The .prevent modifier stops the default browser action, like following a link.

3fill in blank

hard

Fix the error in the directive by correctly adding a modifier to listen only once.

Vue

<button v-on:click[1]="doSomething">Click once</button>

Drag options to blanks, or click blank then click option'

A.stop

B.prevent

C.once

D.capture

Attempts:

3 left

💡 Hint

Common Mistakes

Using .prevent or .stop instead of .once

Missing the dot before the modifier

The .once modifier ensures the event handler runs only one time.

4fill in blank

hard

Fill both blanks to bind an input event with modifiers to trim and lazy update.

Vue

<input v-on:input[1][2]="updateValue">

Drag options to blanks, or click blank then click option'

A.trim

B.lazy

C.prevent

D.once

Attempts:

3 left

💡 Hint

Common Mistakes

Using .prevent which stops default action unnecessarily

Mixing order of modifiers incorrectly

The .trim modifier removes whitespace, and .lazy updates the model only on change.

5fill in blank

hard

Fill all three blanks to bind a keydown event with argument and modifiers for ctrl key and once.

Vue

<input v-on:keydown[1].[2][3]="handleKey">

Drag options to blanks, or click blank then click option'

A.enter

Bctrl

Conce

Dshift

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing argument and modifier syntax

Using .shift instead of .ctrl when Ctrl key is needed

The argument .enter listens for Enter key, .ctrl requires Ctrl key pressed, and .once runs handler once.