What does an argument in a directive do?
A directive argument is the part after the colon (:) that specifies the specific aspect of the element the directive applies to.
In other words, the argument clarifies exactly what the directive works with.
Syntax example
javascript
v-directiveName:argument="value"For example:
javascript
v-bind:href="link"
v-on:click="handler"Arguments in built-in directives
1. v-bind - which attribute to bind
javascript
<a v-bind:href="url">Link</a>href is the argument.
It tells Vue: "bind the value to the href attribute".
It can be shortened:
javascript
<a :href="url">2. v-on - which event to listen for
javascript
<button v-on:click="submit">Submit</button>click is the argument.
It determines the event type.
Shorthand:
javascript
<button @click="submit">3. v-slot - the slot name
javascript
<template v-slot:header>
Header
</template>header is the slot name.
4. v-model (Vue 3) - which prop and event to bind to
In custom components:
javascript
<MyInput v-model:title="pageTitle" />Here the argument title says the binding goes to the title prop and the update:title event.
Argument in a custom directive
The argument is available in the binding object:
javascript
<div v-color:background="'red'"></div>javascript
app.directive('color', {
mounted(el, binding) {
if (binding.arg === 'background') {
el.style.backgroundColor = binding.value;
} else {
el.style.color = binding.value;
}
}
});binding.arg → "background"
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.