vuejsはすべてのツールチップを表示するツールチップを作成します

Question

こんにちは、私はちょうどvuejsとそのイベントをリストで学習しています。 imはコンポーネント（この例ではdiv）をツールチップとして表示/非表示にするにはどうすればいいですか？

私はこの

<ul id="example-1"> 
    <li v-for="item in items"> 
    <div v-on:mouseover="tooltipActive = !tooltipActive">hover me</div> 
    <div class="tooltip" v-if="tooltipActive">{{ item.name }}</div> 
    </li> 
</ul> 

を行なったし、私はデータにtooltipActive: falseを設定します。問題は、1つのリストアイテムにカーソルを合わせると、すべてのアイテムのすべてのツールチップが表示されます。（もちろん）

この種のサンプルを解決する方法はありますか？

Answer 1

console.clear() 
 

 
new Vue({ 
 
    el: "#example-1", 
 
    data:{ 
 
    items: [ 
 
     {name: "item one"}, 
 
     {name: "item two"}, 
 
     {name: "item three"} 
 
    ], 
 
    activeItem: null 
 
    } 
 
})

li {cursor: pointer}

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<ul id="example-1"> 
 
    <li v-for="item in items"> 
 
    <div v-on:mouseover="activeItem = item" 
 
      v-on:mouseout="activeItem = null"> 
 
     hover me 
 
    </div> 
 
    <div class="tooltip" v-if="activeItem === item">{{ item.name }}</div> 
 
    </li> 
 
</ul>