v-onでイベントオブジェクト以外を引数とするイベントハンドラメソッド

date

Mar 4, 2023

repo_url

slug

von-other-param-event

status

Published

summary

type

Post

thumbnail_url

tags

vue

outer_link

イベントハンドラメソッドでは、イベントオブジェクトだけでなく任意の引数を受け取れる。

ただしその場合は引数をテンプレートブロックで渡す必要がある。

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

const pBgColor = ref('blue');
const onPClick = (bgColor: string): void => {
  pBgColor.value = bgColor;
};
</script>

<template>
  <p
    v-on:click="onPClick('red')"
    v-bind:style="{ color: 'white', backgroundColor: pBgColor }"
  >
    ここをクリックすると背景色が変わります。
  </p>
</template>