Suggest an edit

Improve this article

Refine the answer for “What does a modifier do in a directive?”. 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 modifier** is a suffix after a dot (`.`) that *refines or changes the behavior of a directive*.
It does not change the directive itself, it adds extra functionality to it.

Modifiers exist on built-in directives (`v-on`, `v-bind`, `v-model`) and can also be used on **custom directives**.

---

## What does a modifier look like?

```javascript
v-on:click.prevent
v-model.lazy
v-bind:class.prop
```

Modifiers always come after the directive and its argument:

```javascript
directive:argument.modifier1.modifier2
```

---

## Examples of modifiers on standard directives

### `v-on` (event handlers)

```javascript
<button @click.stop="doSomething">Stop propagation</button>
<button @click.prevent="submit">Prevent the browser's default behavior</button>
<button @click.once="init">Fires once</button>
```

Main `v-on` modifiers:

- `.stop` - calls `event.stopPropagation()`
- `.prevent` - calls `event.preventDefault()`
- `.capture` - listen for the event during the capture phase
- `.self` - fires only if the click is on the element itself
- `.once` - the handler fires only once
- `.passive` - `passive: true` for performance

---

### `v-model`

```javascript
<input v-model.lazy="name">
```

Modifiers:

- `.lazy` - update the value on `change` instead of `input`
- `.trim` - automatically trim whitespace
- `.number` - cast to a number

---

### `v-bind`

```javascript
<div :class.prop="myClasses"></div>
```

- `.prop` - bind as a DOM property instead of an attribute
- `.camel` - convert the attribute name to camelCase

---

## Modifiers in *custom directives*

You can use modifiers yourself too:

```javascript
<div v-focus.delay="300"></div>
```

Inside the directive, you can read them:

```javascript
app.directive('focus', {
  mounted(el, binding) {
    if (binding.modifiers.delay) {
      setTimeout(() => el.focus(), binding.value || 0);
    } else {
      el.focus();
    }
  }
});
```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.