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>