9 回閲覧されました

みなさんこんにちは、jonioです。

今回はvue.jsの「.self」について解説します。

まずはサンプルコードを使ってなるべく簡単なコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

.selfとは

vue.jsのバージョン2から登場しました。

イベントの発生元が自分自身の時だけにイベントを発火させたい場合に使います。

この説明だけだと意味が分かったような分からないような感じになると思います。

簡単なサンプルコードで解説します。

サンプルコード

まずは.selfを使わない場合です。

モーダルを表示してモーダル外をクリックするとモーダルを閉じる場合を考えます。

下記のコードで考えます。

<template>
<div 
    v-if="showModal" 
    @click="closeModal"
    class="parent"
>
    <p class="child">モーダルの中身</p>  
</div>
</template>

<script>
const showModal = ref(false);

const closeModal = () => {
  showModal.value = false;
}
</script>

<template>
<div 
    v-if="showModal" 
    @click="closeModal"
    class="parent"
>
    <p class="child">モーダルの中身</p>  
</div>
</template>

<script>
const showModal = ref(false);

const closeModal = () => {
  showModal.value = false;
}
</script>

cssのクラス名（parentとchild）で親と子を判断して下さい。

parentがモーダルの外側でchildがモーダルの中身です。

モーダルの外側をクリックした時にモーダルを閉じるならparentをクリックした時にモーダルを閉じないといけません。

しかしv-onディレクティブを使っている4行目のままだとchildをクリックした時もモーダルを閉じます。

v-onディレクティブは親と子の両方に影響します。

通常のモーダルはchildに編集する内容が表示されるので編集する内容をクリックした時にモーダルを閉じると編集ができないので使い物になりません。

こんな場合に「.self」を使うとparentをクリックした時にparentにだけv-onディレクティブを発火させることができます。

コードを下記に変更します。（関係している部分のみ記載します）

<div 
    v-if="showModal" 
    @click.self="closeModal"     //この行を修正
    class="parent"
>

<div 
    v-if="showModal" 
    @click.self="closeModal"     //この行を修正
    class="parent"
>

使う場面

何らかのボタンをクリックして表示した時に表示外をクリックすると表示した内容を閉じる時に使うのが有効な使い方だと思います。