Hey there! As someone who’s been in your shoes starting out with Vue, I totally get how these small snags can feel frustrating. Let’s break down both your problems and fix them step by step.

1. Getting the Hover Card Effect (Shift Up + Color Change) Working #

First, let’s tackle why your hover behavior isn’t behaving as expected. Looking at your code, here’s what’s going on:

The Core Issue #

Your .card:hover { top: -5px } rule won’t do anything unless the .card element has a position value set (like relative, absolute, or fixed). By default, elements are position: static, and the top property doesn’t affect static elements. Your dynamic type-* classes are correctly bound, but we need to tweak the CSS to make the hover shift and color change play nice together.

The Fix #

Update your CSS to add positioning and optional smooth animation:

/* Add position: relative so the top property works on hover */
.card {
  position: relative;
  transition: all 0.3s ease; /* Optional: Makes the shift/color change smooth */
}

.card:hover {
  top: -5px;
  /* Optional: Darken the background on hover for better visual feedback */
  filter: brightness(0.9);
}

/* Keep your existing dynamic type styles */
.card.type-attack { background:#9b1b1b }
.card.type-special { background:#751b9b }
.card.type-support { background:#1b6e9b }

Do You Need to Detect the Dynamic Class in Vue? #

If you were trying to check the class for extra logic (not just styling), you don’t need to dig into the DOM’s class list. Instead, use the def.type prop directly in your component—since that’s the source of the dynamic class. For example:

// Inside your card component
computed: {
  isAttackCard() {
    return this.def.type === 'attack';
  }
}

2. Fixing Your Custom Events #

Your custom events aren’t working because you’re listening to them inside the component itself instead of in the parent component that uses the <card> component. Here’s how to fix that:

The Problem #

When you call this.$emit('play') in your component’s play method, that event is sent up to the parent component, not to the component itself. Your mounted hook where you do this.$on("play", ...) is trying to listen to events emitted by the component itself—which isn’t how Vue’s custom events are designed to work.

The Fix #

You have two options depending on what you need:

Option 1: Handle Logic Directly in the Component

If the play logic only needs to run inside the <card> component, skip emitting an event and just run the code directly:

methods: {
  play() {
    // Run your component-internal logic here
    console.log("Play action triggered inside the card!");
    console.log(`Test args: str='str_arg', num=777`);
  }
}

Option 2: Emit Events to the Parent Component

If you want the parent to react when the card is clicked, keep emitting events from the child, then listen to them in the parent:

1. Keep your component’s play method as is (it’s correctly emitting events):

methods: {
  play() {
    this.$emit('play')
    this.$emit('test_event_with_args', 'str_arg', 777)
  }
}

2. In your parent component (where you use <card>), add event listeners:

<!-- Parent component template -->
<card 
  :def="yourCardData" 
  @play="handleCardPlay" 
  @test_event_with_args="handleTestEvent"
></card>

// Parent component methods
methods: {
  handleCardPlay() {
    console.log("Custom event 'play' received from card component!");
  },
  handleTestEvent(str, num) {
    console.log(`Test event received: str=${str}, num=${num}`);
  }
}

内容的提问来源于stack exchange，提问作者Humoyun Ahmad