【Vue.js】マウスオーバーした時に、対象の要素だけを表示させたい。

以下、サンプルコードです。
JS Fiddle

【やりたいこと】

① 3にホバーした時は、３−１、３−２を表示 & 4にマウスホバーした時は、4−１、4−２を表示
② -1,-2にマウスホバー中は、activeを付与し続ける

【つまづいている点】

① 3にマウスホバーすると、３−１、３−２、4−１、4−２全て表示される。

【その他】

3と４で、メソッド名をそれぞれ用意すれば良いかと思いますが、
１つの関数で処理できるようにしたい。

宜しくお願いいたします。

fumito_94

2019/06/23 10:58

jsfiddleがhtml側で呼び出しているメソッド名が間違っているみたいです！ <li class="nav-li" @mouseover="monuseOver" @mouseleave="mouseLeave">３</li> ↓ <li class="nav-li" @mouseover="mouseOver" @mouseleave="mouseLeave">３</li>

frtne

2019/06/23 14:18

タイプミスでした... 修正しました！

行動規範の内容に同意します

回答1件

ベストアンサー

一応同じメソッドでやりたい場合は下記のようにできると思います！

js
1new Vue({
2  el: "#app",
3  data: {
4    isActive: false,
5    selected: '',
6  },
7  methods: {
8  	mouseOver: function(item){
9      this.selected = item;
10      this.isActive = true
11    },
12    mouseLeave: function(){
13    	this.isActive = false;
14      this.selected = '';
15    }
16  },
17})

html
1<li class="nav-li"><a>１</a></li>
2<li class="nav-li"><a>２</a></li>
3<li class="nav-li" @mouseover="mouseOver(2)" @mouseleave="mouseLeave" >３</li>
4   <ul class="nav-ul-child" :class='{active:selected===2}'>
5       <li><a>3-1</a></li>
6       <li><a>3-2</a></li>   
7   </ul>
8<li class="nav-li" @mouseover="mouseOver(4)" @mouseleave="mouseLeave">４</li>
9   <ul class="nav-ul-child" :class='{active:selected===4}'>
10       <li><a>4-1</a></li>
11       <li><a>4-2</a></li>   
12   </ul>