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.