Modifiersの活用例

date

Mar 15, 2023

repo_url

slug

modifiers-example

status

Published

summary

type

Post

thumbnail_url

tags

vue

outer_link

下記のようにmodifiersによる判定を活用することができる。

<script setup lang="ts">
import { DirectiveBinding, ref } from 'vue';

const userName = ref<string>('');

const vFocus = {
  mounted: (el: HTMLElement, binding: DirectiveBinding) => {
    el.focus();
    // modifiers.alertの要素のスタイルを変更する
    if (binding.modifiers.alert) {
      el.style.backgroundColor = 'pink';
    }
  },
};
</script>

<template>
  <form>
    <div class="form-control">
      <label for="user-name">Your Name</label>
      <input
        v-model="userName"
        id="user-name"
        name="user-name"
        type="text"
        v-focus.alert
      />
    </div>
  </form>
</template>