如何在vue.js中悬停在表的特定行时显示不同的值

Question

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

例如，假设我有一个由5行组成的表，其中列有姓名、地址和电话号码。如果没有悬停，name会显示全名，所以当我悬停在某一行时，它应该显示该行的昵称、地址和电话号码。

我在那一排玩鼠标悬停和鼠标悬停。但是，当我将鼠标悬停在某一特定行上，而不是显示该特定行更改后的名称值时，它将在所有行中显示更改后的姓名值。

我哪里做错了？有人能帮我吗。下面是我的表代码。

<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"。