0

I am trying to change the background color on a Table row in VUE. I want the background color of the table row to be changed to black when the mouse is hovered and back to default when it is not. The table row already has a condition on it. However I am still trying something like this

<tr v-for="row in Object.keys(tidyMarketOrders)" v-bind:key="row.ticker" @onmouseover="color='black'">

1 Answer 1

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

2
  • I thought about that but I was hoping if there is a feature in vue to do that. I have a v-if question posted as well. If you can check that would be thankful Jun 5 at 0:36
  • You could hack together a way to do it programmatically, but unless you have additional requirements the CSS solution is the simplest. I've edited the answer to show this.
    – yoduh
    Jun 5 at 0:49

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.