Vue main component fails to detect emitted events from child component

I am working on a website that will showcase multiple cards which expand when selected. Here is the code for the card component:

<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>

The parent component is expected to listen and handle these interactions:

<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>
        
        <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>

The goal is to select a card and pass its ID to the parent component to render it on top of all other cards.

Vue dev tools

Answer №1

The signal is triggered from the Card module, however, your handler is attached to a v-card element in the parent module. It is recommended to attach the event listener to the Card module instead:

<!-- OLD WAY: -->
<!-- <v-card v-on:expandCard="displayCard"> -->

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

retrieving particular information from within a Firebase array

My Firebase document contains a list with various properties such as name and imgUrl. Currently, I am facing an issue with extracting only the "name:" information from the list in Firebase Cloud Firestore so that I can determine how many times a specific n ...

How to send the value of a JavaScript loop variable to PHP using AJAX

How can I send variables in a loop to a PHP file using AJAX? var lat; var lng; var array = [22.399602, 114.041176, 22.344043, 114.0168, 22.327529, 114.087181]; console.log(array); for (var i = 0; i < 6; i += 2) { lat = array[i]; console.log("l ...

The challenge of rendering in Three.js

After configuring my code to render a geometry, I discovered that the geometry only appears on the screen when I include the following lines of code related to control: controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventList ...

Compatibility issues arise when trying to use jQuery Mobile in conjunction with jQuery UI

I'm currently developing an HTML5 application that needs to function seamlessly on desktops, tablets, and mobile devices. However, I've encountered a hurdle when it comes to implementing progress bars and dialog boxes. Initially, I was using jQue ...

What could be causing the discrepancy in the model value when using checkboxes in AngularJS?

Something strange is happening with my code. I have a checkbox in my view that has a directive to display its value when it changes. Surprisingly, it works fine in Firefox, showing the correct values. However, in other browsers like Chrome, it shows the op ...

Navigating the same origin policy in Mozilla: A step-by-step guide

I have implemented YUI autocomplete in my project by creating a web service that provides suggestions. Everything works fine when both the application and the web service are deployed on the same machine. However, when I deploy the web service on a differe ...

Having trouble importing OrbitControls in three.js with an error?

I'm currently working on localhost and I've encountered an issue while trying to import "orbitcontrols()" which is not functioning properly and displaying an error. Here is the error message main.js:1 Uncaught SyntaxError: Cannot use import stat ...

The Angular 1.5 directive utilizes one-way binding to seamlessly update the parent scope

I am experiencing an issue with a directive that has an isolated-scope and one-way binding variable. Despite setting up the directive to keep the scope separate, any changes made to the variable in the directive controller also update the parent scope. Be ...

Utilizing Google Analytics 4 in a React TypeScript Environment

Currently, there are two options available: Universal Analytics and Google Analytics 4. The reasons why I lean towards using Google Analytics 4: Universal Analytics is set to be retired on July 1, 2023, so it makes sense to start fresh with Google Analyt ...

How can I create a JSON string that exactly matches the data source needed for a pie chart? Any tips

received JSON string: "{Date:'15/05/2015',y:'6'}, {Date:'01/08/2015',y:'6'}, {Date:'02/08/2015',y:'6'}, {Date:'08/08/2015',y:'72'}, {Date:'09/08/2015',y:&apo ...

Verify user credentials during login in a React application

My current challenge involves setting up a hardcoded authentication in React for user login using a form. Despite meeting the requirements for the "if" statement, it always returns the "else" statement. I am attempting to pass both the handleSubmit functi ...

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

After my carousel moves past 10000 pixels, it starts flickering through multiple elements. I'm utilizing jCarousel Lite: Could this be a jQuery-related issue? My initial assumption is that it may be specific to jCarousel Lite, but there doesn't ...

Refreshing express-session sessions

My goal is to enhance the user experience by retrieving their profile from the mongodb database when they visit the page, and then updating their session with this information. Currently, I am utilizing the following packages for managing sessions: - ex ...

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

Retrieve data in the parent component as new data is added in the child component in Vue, without relying on a watcher

Is there another way in Vue to automatically display updated data without using a watcher? Similar to React's useEffect that triggers a render when the data changes. I'm looking for an alternative that doesn't require dedicated resources to ...

Modify the NAME attribute when clicked using Jquery

I am attempting to modify the NAME attribute of a DIV with the text from a textbox using jQuery. Take a look at my code snippet: http://jsfiddle.net/e6kCH/ Can anyone help me troubleshoot this issue? ...

Top method for developing a Wizard element within React

As I delved into learning React, my focus shifted towards creating a Wizard component. My initial vision was to use it in this way: <Wizard isVisible={this.state.isWizardVisible}> <Page1 /> <Page2 /> </Wizard> However, I e ...

Updating JSON data using fetch API

Hi everyone, I'm currently working on an email application and need help with implementing an archive button for each email. It seems that the function to change the archived status to true is being called, but for some reason, it's not making th ...