How to change the prop of a vuetify component based on mouseover of another component?

1
votes

I have a set of three v-card components. The first two have set colors and the color of the third card is dynamic. Currently, the third card changes to green whenever the mouse hovers over any of the cards. However, I would like to change the color of the third card based on where the mouse is hovering, so it takes on the color of whichever card the mouse is over. In this case, having Card 3 be red when hovering over the red card, blue when hovering over the blue card, and white when hovering over everywhere else. Here is a codepen.

<template>
    <div id="app">
      <v-app>
        <v-container>
          <v-card width="100" height="100" color="blue"
            @mouseover="mouseIn"
            @mouseleave="mouseOut"></v-card>
          <v-card width="100" height="100" color="red"
            @mouseover="mouseIn"
            @mouseleave="mouseOut"></v-card>
          <v-card width="100" height="100" :color='thirdColor'
            @mouseover="mouseIn"
            @mouseleave="mouseOut"></v-card>
        </v-container>
      </v-app>
    </div>
</template>

<script>
    new Vue({
        el: "#app",
        vuetify: new Vuetify(),
        data() {
            return {
                thirdColor: '',
                hover: false
            }
        },
        methods: {
          mouseIn(){
            this.hover=true
            this.thirdColor="green"
          },
          mouseOut(){
            this.hover=false
            this.thirdColor=''
          }
        }
    });
</script>
1
vue.jsvuetify.js

1 Answers

0
votes

This should work fine.

HTML

<div id="app">
  <v-app>
    <v-container>
      <v-card width="100" height="100" color="blue"
              @mouseover="mouseIn($event)"
              @mouseleave="mouseOut"></v-card>
      <v-card width="100" height="100" color="red"
              @mouseover="mouseIn($event)"
              @mouseleave="mouseOut"></v-card>
      <v-card width="100" height="100" :color='thirdColor'
              @mouseover="mouseIn"
              @mouseleave="mouseOut"></v-card>
    </v-container>
  </v-app>
</div>

JS

new Vue({
        el: "#app",
        vuetify: new Vuetify(),
        data() {
            return {
                thirdColor: '',
                hover: false
            }
        },
        methods: {
          mouseIn(e){
            this.hover=true
            this.thirdColor=e.target.classList[3]
          },
          mouseOut(){
            this.hover=false
            this.thirdColor=''
          }
        }
    });