CODEWITHSUNDEEP
vue.jsbootstrap-vue
Dcoder14
Dcoder14

Reputation: 1939

How to show different value on hover of a particular row of table in vue.js?

Here I have a table with 3 columns and what I want to do is, on hover of a particular row the value of one column should change and other two column's value remain same.

For example suppose I have a table of 5 rows with columns name, address, phone number. And without hover name shows full name So when I hover on a particular row, it should show nickname, address and phone number in that particular row.

I was doing with mouseover and mouseout on that row. But when I hover on a particular row instead of showing changed value of name for that particular row, it is showing changed value of name in all rows.

Where am I doing wrong ? can anyone help me out from here. Below is my code for table.

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

Upvotes: 0

Views: 1713

Answers (1)

user7722867
user7722867

Reputation: 488

You can't use a global variable for this. Your onHover is shared between everyone. What you should do here is keep a hoveredId and set hoveredId to student.id on the hover event and have v-show="student.id == hoveredId".

Upvotes: 3

Related Questions