vuejs 创建显示所有工具提示的工具提示

Question

大家好，我刚刚学习 vuejs 及其列表中的事件。我想知道我如何 show/hide 组件（在这个例子中，一个 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>

vuejs 创建显示所有工具提示的工具提示

vuejs create tooltip showing all tooltips

tooltip

show-hide

vue.js

vuejs2