【Vue3】Vuetifyのv-text-fieldでclearを押された時にメソッドを呼び出したい

概要

Vuetifyでは、テキストボックスのコンポーネントとしてv-text-fieldが用意されています。
機能として中身をclearできる機能が用意されているのですが、このclearが押された時に別途メソッドを呼び出す際のメモです。

前提

• 使用したVuetifyのバージョンは3.6.11です。

対応方法

v-text-fieldのドキュメントClearableの項にある通り、
@click:clear="onClear"のような形式で設定すれば実現できます。

実装サンプル

以下のイメージでclearの×ボタンが押された時に、onClickClearのメソッドが呼び出されます。
メソッドはv-modelに設定された値が、空の状態になった後に実行されます。

<template>
    <v-text-field width="200px" v-model="placeName" clearable @click:clear="onClickClear">
        <template v-slot:label>
            場所名
        </template>
    </v-text-field>
</template>