vue.js - vuejs 创建工具提示显示所有工具提示

Question

大家好，我刚刚学习 vuejs 及其列表中的事件。 我想知道如何显示/隐藏组件(在本例中为 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76000313364458425844" rel="noreferrer noopener nofollow">[email protected]</a>"></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>