Directive with arguments and modifiers in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the effect of the modifier in this Vue directive?

Consider the Vue directive usage: . What does the .trim modifier do here?

Vue

<template>
  <input v-model.trim="username" />
  <p>{{ username }}</p>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
</script>

A It disables the input field so the user cannot type.

B It prevents the input from updating the model until the input loses focus.

C It automatically removes whitespace from both ends of the input value before updating the model.

D It converts the input value to uppercase before updating the model.

💡 Hint

Think about what trimming means in text processing.

The .trim modifier removes leading and trailing spaces from the input value before updating the bound variable.

📝 Syntax

intermediate

Which directive syntax correctly passes an argument and a modifier?

You want to create a custom directive that accepts an argument and a modifier. Which of the following is the correct Vue directive syntax?

A v-my-directive[arg].modifier

B v-my-directive:arg.modifier

C v-my-directive.modifier:arg

D v-my-directive:modifier.arg

💡 Hint

Arguments come after a colon, modifiers come after a dot.

In Vue, the argument is specified after a colon and modifiers after a dot, so v-my-directive:arg.modifier is correct.

❓ state_output

advanced

What is the value of the argument and modifiers inside the directive hook?

Given this directive usage: <div v-focus:input.lazy.once>, what will be the values of binding.arg and binding.modifiers inside the directive's mounted hook?

Vue

export default {
  mounted(el, binding) {
    console.log(binding.arg)
    console.log(binding.modifiers)
  }
}

A "input" and { lazy: true, once: true }

B "focus" and { input: true, lazy: true, once: true }

C undefined and {}

D "input.lazy.once" and {}

💡 Hint

Arguments come after colon, modifiers after dots.

The argument is the string after the colon, here "input". Modifiers are the dot-separated tokens after, here lazy and once set to true.

🔧 Debug

advanced

Why does this custom directive not recognize the modifier?

You wrote this directive usage: <button v-click:submit.prevent>Submit</button> but inside the directive, binding.modifiers is empty. Why?

Vue

export default {
  mounted(el, binding) {
    console.log(binding.modifiers)
  }
}

A Because the directive name is 'click' but the modifier 'prevent' is only recognized on native events, not custom directives.

B Because the argument 'submit' is invalid and blocks modifiers from being parsed.

C Because the directive is missing a value, so modifiers are ignored.

D Because modifiers must be declared in the directive definition to be recognized.

💡 Hint

Modifiers like .prevent work only on native event listeners.

The .prevent modifier is a special Vue event modifier that only works on native event listeners like v-on, not on custom directives like v-click.

🧠 Conceptual

expert

How does Vue prioritize modifiers and arguments in directive hooks?

In a custom directive, if you use v-example:foo.bar.baz, which of the following statements about binding.arg and binding.modifiers is true?

A <code>binding.arg</code> is undefined, and <code>binding.modifiers</code> is { foo: true, bar: true, baz: true }

B <code>binding.arg</code> is 'foo.bar', and <code>binding.modifiers</code> is { baz: true }

C <code>binding.arg</code> is 'foo.bar.baz', and <code>binding.modifiers</code> is {}

D <code>binding.arg</code> is 'foo', and <code>binding.modifiers</code> is { bar: true, baz: true }

💡 Hint

Remember the syntax: argument after colon, modifiers after dots.

Vue treats the first token after colon as argument, and each dot-separated token after as a modifier set to true.

Practice

1. In Vue, what does a directive argument specify?
v-bind:title uses title as an argument. What does it do?

easy

A. It adds a CSS class to the element.

B. It changes the directive into a different directive.

C. It tells the directive which attribute or property to target.

D. It defines a new event listener.

Solution

1. Step 1: Understand directive arguments

   Directive arguments specify what part of the element the directive should affect, like an attribute or property.

2. Step 2: Analyze v-bind:title

   Here, title is the argument telling v-bind to bind the value to the element's title attribute.

3. Final Answer:

   It tells the directive which attribute or property to target. -> Option C

4. Quick Check:

   Directive argument = target attribute/property [OK]

Hint: Arguments specify target attribute/property in directives [OK]

Common Mistakes:

• Thinking arguments change directive type
• Confusing arguments with modifiers
• Assuming arguments add CSS classes

2. Which of the following is the correct syntax to use a modifier with a directive argument in Vue?
v-on:click.prevent is an example. Which is correct?

easy

A. v-on:click.prevent

B. v-on.prevent:click

C. v-on:prevent.click

D. v-on:click.prevent()

Solution

1. Step 1: Recall Vue directive syntax

   In Vue, modifiers come after the argument, separated by dots, e.g., v-on:click.prevent.

2. Step 2: Check each option

   v-on:click.prevent matches the correct pattern: directive, colon, argument, dot, modifier. Others mix order or add parentheses incorrectly.

3. Final Answer:

   v-on:click.prevent -> Option A

4. Quick Check:

   Modifiers follow arguments with dots [OK]

Hint: Modifiers come after arguments, separated by dots [OK]

Common Mistakes:

• Placing modifiers before arguments
• Using parentheses with modifiers
• Switching order of argument and modifier

3. What will be the effect of this Vue directive?

<button v-on:click.once.prevent="submit">Submit</button>

medium

A. The submit method runs every click and does not prevent default event.

B. The submit method runs every click and prevents default event.

C. The submit method runs once but does not prevent default event.

D. The submit method runs once on click and prevents default event.

Solution

1. Step 1: Understand modifiers .once and .prevent

   .once makes the event handler run only once. .prevent calls event.preventDefault() to stop default browser behavior.

2. Step 2: Analyze the directive behavior

   The button's click triggers submit only once and prevents default action each time.

3. Final Answer:

   The submit method runs once on click and prevents default event. -> Option D

4. Quick Check:

   .once + .prevent = run once + prevent default [OK]

Hint: Modifiers chain to combine behaviors like once and prevent [OK]

Common Mistakes:

• Ignoring the effect of .once modifier
• Confusing .prevent with .stop
• Assuming method runs multiple times

4. Identify the error in this Vue directive usage:

<input v-model.trim.lazy="username">

medium

A. The directive should be v-model:trim.lazy with an argument.

B. The syntax is correct; no error present.

C. Modifiers .trim and .lazy cannot be used together on v-model.

D. Modifiers must be separated by commas, like .trim,.lazy.

Solution

1. Step 1: Check Vue documentation for v-model modifiers

   Vue allows chaining modifiers like .trim and .lazy on v-model to trim input and update on change.

2. Step 2: Validate syntax correctness

   The syntax v-model.trim.lazy is valid and commonly used. No argument is needed here.

3. Final Answer:

   The syntax is correct; no error present. -> Option B

4. Quick Check:

   Multiple modifiers can chain on v-model [OK]

Hint: Modifiers chain with dots, no commas needed [OK]

Common Mistakes:

• Thinking modifiers need commas
• Assuming arguments are required for modifiers
• Believing some modifiers can't combine

5. You want to create a custom directive v-focus that focuses an input only once when inserted, and you want to pass an argument to specify the delay in milliseconds. Which is the correct way to use arguments and modifiers to achieve this?

<input v-focus:delay.once="500">

hard

A. Use argument delay for delay and modifier .once to focus once.

B. Use modifier .delay for delay and argument once to focus once.

C. Arguments and modifiers cannot be combined in custom directives.

D. Use v-focus.once:delay="500" to apply once and delay.

Solution

1. Step 1: Understand argument and modifier roles

   Arguments specify extra data like 'delay' to the directive. Modifiers like .once change behavior, here to run focus only once.

2. Step 2: Analyze the directive usage

   v-focus:delay.once="500" correctly uses 'delay' as argument and '.once' as modifier. The value '500' is passed as delay time.

3. Final Answer:

   Use argument delay for delay and modifier .once to focus once. -> Option A

4. Quick Check:

   Argument = data, modifier = behavior change [OK]

Hint: Arguments pass data, modifiers change behavior [OK]

Common Mistakes:

• Swapping argument and modifier positions
• Thinking they can't be combined
• Using modifiers as arguments