在vue.js中如何在悬停时显示不同的值？

Question

我有一个有3列的表格，我想做的是，在某一行的悬停时，一列的值应该改变，而其他两列的值保持不变。

例如，假设我有一个5列的表格，其中有姓名，地址，电话号码。在没有鼠标悬停的情况下，姓名会显示全名，所以当我悬停在某一行时，应该显示该行的昵称、地址和电话号码。

我是用鼠标移到那一行上，然后把鼠标移出。但是当我把鼠标悬停在某一行上时，它并没有显示该行的姓名变化值，而是显示所有行的姓名变化值。

下面是我的表的代码。

<b-tbody>
  <b-tr
    v-for="student in studentList"
    :key="student.ID"
    @mouseover="onHover = true"
    @mouseout="onHover = false"
  >
    <b-td>
      <span class="student-list" v-show="onHover">
        {{ student.nickName }}
      </span>
      <span v-show="!onHover">
        {{ student.fullName }}
      </span>
    </b-td>
    <b-td>{{ student.address }}</b-td>
    <b-td class="text-right">
      {{ student.phoneNumber }}
    </b-td>
  </b-tr>
</b-tbody>

Answer 1

你不能用全局变量来做这个。你的onHover是每个人共享的。你应该做的是保留一个hoveredId，并在悬停事件中把hoveredId设置为student.id，然后有 v-show="student.id == hoveredId".