I'm fairly new when it comes to using Vue, so I might not be approaching this in the most efficient manner. My challenge involves a table of rows generated via a v-for loop, accompanied by a list of corresponding row titles also created through a v-for loop. These need to be treated as separate DOM elements in order to facilitate fixed header scrolling. The goal is to change the color of both the row and its title when hovering over a specific row.
In an attempt to achieve this with Vue, my thought process followed these steps:
- When hovering over an element, set a data property to store the index of that particular element.
- Apply a class binding to the elements in question, allowing their styles to change when the stored index matches their respective indices from the v-for loop.
While this approach technically works, the code execution tends to be sluggish and slow. Despite having a moderate number of rows (40) and columns (60), it doesn't seem like an excessive amount.
A summarized version of the code can be seen below:
Template html
<div class="rowTitle"
v-for="(rowName, i) in yAxis.values" :key="i"
@mouseover="hover(i)"
:class="hoverActive(i)" >{{rowName}}</div>
<div class="row"
v-for="(row, i) in rows" :key="i"
@mouseover="hover(i)"
:class="hoverActive(i)" >{{row}}</div>
Vue object
export default {
data:()=>(
{
rows: rows,
yAxis: yAxis,
rowHover: -1,
}
),
methods:{
hover(i) {
this.rowHover = i
},
hoverActive(i) {
return this.rowHover == i ? 'hover' : ''
}
},
}