Suggest an edit

Improve this article

Refine the answer for “What does an argument in a directive do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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"`

Markdown · drag & drop images · ⌘B / ⌘I shortcuts218 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.