Vue.jsでPCからはマウスホバー&クリック、スマホからはクリック（タップ）のみの処理にする方法

ボタンを押すと要素が出てくるUIで、PCではhoverとclick。スマホからはタップのみというのを作るのに少し手間取ったのでメモです。

clickとhoverを両方記述

最初はclickとhoverを両方記述してみたのですが、スマホだと挙動がおかしくなりました。

モバイル判定をする

そこで調べたところ、スマホ判定を入れてスマホだったらhover（記述はmouseover/mouseleave）は動かないとすればいいとあったので、その判定を追加したところうまく動きました。

Vue.jsでmouseoverとclickイベントの両方にハンドラーをバインドするとAndroidで不具合 - nanisore oishisou

こんばんわー！ 金曜日に↓の続きを書こうと思ったんだけど、↑ってことがあっていろいろ調べていたらブログを書く時間がなくなったんで、また近々パート2は書こうと思うます。 arm4.hatenablog.com そもそもclickイベントとmouseoverイベントの両方を同じボタンにくっつけるというのがどうかと思うという...

arm4.hatenablog.com

デモページ

実際に実装したデモページはこちら

click・hoverの箇所のHTMLコード

<div id="app">
        <ul class="btnArea">
            <li v-for="(item,index) in items" v-on:click="showList(index)" v-on:mouseover="!isMobile ? showListPc(index) : null" v-on:mouseleave="!isMobile ? hideList(index) : null"><span class="btn01">{{ item }}</span>
                <ul class="selectList" v-if="hoverFlag && index === hoverIndex">
                    <li>隠れているコンテンツ</li>
                </ul>
            </li>
        </ul>
    </div>

JS部分のコード

var app = new Vue({
            el: '#app',
            data: {
                items: ["ボタン1","ボタン2","ボタン3","ボタン4"],
                hoverFlag: false,
                hoverIndex: null,
                isMobile: false
            },
            mounted: function () {
                if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {              this.isMobile = true;          } else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
                    this.isMobile = true;
                } else {
                    this.isMobile = false;
                }
            },
            methods: {
                showList(index){
                    if(this.hoverFlag === true && this.hoverIndex === index){
                        this.hoverFlag = false;
                        this.hoverIndex = null;
                        return;
                    }else {
                        this.hoverFlag = true;
                        this.hoverIndex = index;
                        return;
                    }
                },
                showListPc(index){
                    this.hoverFlag = true;
                    this.hoverIndex = index;
                },
                hideList(){
                    this.hoverFlag = false;
                }
            }
        })