Vue parent component doesn't recognize emit from child

Question

I am trying to make a website which features multiple cards and when a card is selected it should expand. The code from the card component is:

<template>
  
  <v-card
    class="mx-auto"
    max-width="90%"
    min-height="600"
    app
    @click="selectCard(id)"
  >
    <!-- <img v-bind:src="img" /> -->
    
    <v-img
      dark
      class="white--text align-end"
      height="400px"
      :src="require('../assets/' + img)"
      :alt="`${title}`"
      
    >
    </v-img>
    <v-card-title>
      <p class="text-wrap">{{title}}</p>
    </v-card-title>
    
    <v-card-subtitle class="pb-0">{{taglist}}</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>{{text}}</div>
    </v-card-text>

    <v-card-actions>

      <v-btn
        color="orange"
        text
        @click="selectCard(id)"
      >
        Read More
      </v-btn>
    </v-card-actions>
  </v-card>
</template>


<script>
  export default {
    name: 'Card',
    computed: {
      taglist() {
        let list = "";
        for (let t of this.tags) {
          list = list + t + ", ";
        // console.log("TEST:" + (1===this.id))
        }
        
        list = list.substring(0, list.length-2);
        return list;
      }
    },
    methods: {
      selectCard(id) {
        this.$emit('expandCard',id)
      }
    },
    
    props: {
      title: String,
      tags: Array,
      img: String,
      text: String,
      id: Number,
    }
  }
</script>

And the parent component that should be listening is:

<template>
  <div class="projects">
    
    <v-main>
      <v-row>
        <v-col 
          cols="12"
          sm="6"
          md="4"
          lg="4"
          v-for="data in info"
          :key="data.index"
          
        >
          <Card 
            :title="data.title"
            :tags="data.tags"
            :img="data.img"
            :text="data.text"
            :id="data.index"
          />
        </v-col>
      </v-row>
      
      <!-- <v-on:expandCard="showCard"/> -->
      <div> {{reached}} </div>
      
        <v-card 
          v-on:expandCard="showCard"
          v-if="dialog">
          <p> {{reached}}</p>
            <v-img
            dark
            class="white--text align-center"
            height="80%"
            :src="require('../assets/' + info[id].img)"
            :alt="`${info[id].title}`"
            
            >
            </v-img>
            <v-card-title>
            <p class="text-wrap">{{info[id].title}}</p>
            </v-card-title>
            
            <v-card-subtitle class="pb-0">{{info[id].tags}}</v-card-subtitle>

            <v-card-text class="text--primary">
            <div>{{info[id].text}}</div>
            </v-card-text>

            <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn text color="primary" @click="dialog = false">Return</v-btn>
            </v-card-actions>
        </v-card>
    </v-main>


  </div>
</template>

<script>
// @ is an alias to /src
import Card from '@/components/Card.vue'

export default {
  name: 'Projects',
  
    methods: {
      showCard(id) {
        this.dialog = true;
        this.id = id
        console.log(this.id)
      },
      reached() {
        console.log("reached")
      }
    }
</script>

What i want is to select a card and then pass the id of the card to the parent and then the parent renders that card above all other cards.

Vue dev tools

Answer 1

The event is emitted from the Card component, but your listener is on a v-card in the parent component. The listener should be on Card instead:

<!-- BEFORE: -->
<!-- <v-card v-on:expandCard="showCard"> -->

<Card v-on:expandCard="showCard">