[Vuejs]-Mouseover tablerow background color in VUE

by

1👍

✅

@onmouseover expects a JavaScript statement or function. On mousing over the table row you’re assigning the string 'black' to a variable called color. Since this variable is not related to the <tr> in any way it doesn’t accomplish anything.

You can accomplish your goal instead with CSS.

tr:hover {
  background-color: black;
}

If you absolutely had to do this programmatically, you could do something like this:

<template>
  <tr
    :style="{ backgroundColor: bgColor }"
    @mouseover="bgColor = 'black'"
    @mouseleave="bgColor = 'white'"
  >
    <td>table row content</td>
  </tr>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 'white'
    }
  }
}
</script>

You’ll need @mouseleave to do the opposite of @mouseenter to simulate a toggle effect. Also notice that the event names don’t include the word "on". In Vue you omit that, so for example onclick is just @click

👤yoduh

Leave a comment