Transferring information between Vue.js components via data emissions

Greetings from my VueJS Table component!

<b-table
    class="table table-striped"
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      :fields="fields"
      @row-clicked="test"
      lg
    ></b-table>

Here's the method within the same component:

methods: {
    test(){
        console.log('testing')
        this.$emit('rowClickedEvent',"heyoooooooo")
    }
},

Now, let's take a look at the parent component:

    <ClientTable :fields="fields" :items="rows" :sortBy="sortBy" :sortDesc="sortDesc" @rowClickedEvent="Callme()"/>

And here is the method in the parent component:

methods: {
    Callme(e){
        console.log('hee')
    }
},

I'm new to VueJS and I am having trouble with using Emit. My code doesn't seem to be working as expected, as it does not log anything to the console.

Thank you in advance for any help!

Answer №1

I replicated your query and it performed effectively.

Vue.config.devtools = false
Vue.config.productionTip = false

Vue.component('client-table', {
  props: ['items'],
  methods: {
    test(){
      this.$emit('row-clicked',"heyoooooooo")
    }  
  },
  template: `
    <b-table
      class="table table-striped"
      :items="items"            
      lg
      @row-clicked="test"
    ></b-table>
  `
})

new Vue({
  el: "#app",
  data: {
    rows: [
      { 'heading 1': 'cell in table', 'heading 2': 'cell in table', 'heading 3': 'cell in table' },
      { 'heading 1': 'cell in table', 'heading 2': 'cell in table', 'heading 3': 'cell in table' },
      { 'heading 1': 'cell in table', 'heading 2': 'cell in table', 'heading 3': 'cell in table' },
    ]
  },  
  methods: {
  Execute (e) {
       console.log(e)
    }
  }
})
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
  />
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
  />

<div id="app">
  <client-table 
    :items="rows"
    @row-clicked="Execute">
  </client-table>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
 <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d4641464053421f44475772001c020c09164e55160814">[email protected]</a>/dist/bootstrap-vue.js"></script>

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

Searching for a document using the $eq operator in MongoDB within the context of Next.js - what is

In my Next.js code, I am fetching a document from MongoDB using a unique slug. Here is the code snippet: export async function getStaticProps(context) { const postSlug = context.params.postPage; const { db } = await connectToDatabase(); const posts ...

Using Jest's moduleNameMapper with Next.js without TypeScript

I've been encountering some challenges trying to implement moduleNameMapper in NextJS using JavaScript. In this particular project, TypeScript is not being utilized. Next: 12.2.5 React: 18.2.0 Jest: 29.0.1 Jest environment jsdom: 29.0.1 Below is the ...

Learning how to use Express.js to post and showcase comments in an HTML page with the help of Sqlite and Mustache templates

I am facing a persistent issue while trying to post new comments to the HTML in my forum app. Despite receiving various suggestions, I have been struggling to find a solution for quite some time now. Within the comments table, each comment includes attrib ...

excessive memory usage in a simple react-native application

My experience with creating my first react native app has been more challenging than I initially expected. I'm having trouble understanding what I might be doing wrong. Initially, the app is simple, fetching data through Redux. componentWillMount() ...

The data remains stagnant even after employing the onDataChange function in react native following the integration of a reusable component

My reusable Text input component is not working properly for validation. I am unable to retrieve the input value as it always shows null. This is how I am retrieving the username and password: <LoginTextBox placeholderName='Email& ...

Tips for triggering an error using promise.all in the absence of any returned data?

I'm dealing with an issue in my project where I need to handle errors if the API response returns no data. How can I accomplish this using Promise.all? export const fruitsColor = async () : Promise => { const response = await fetch(`....`); if( ...

Using the mt-downloader module in a Node application is a straightforward process

Hey there, I'm looking to incorporate the Multi downloader module into my project. I've checked out the GitHub link, but unfortunately, there are no examples provided on how to actually use this module. I came across this example and tried implem ...

Guide to fetching and returning data from AJAX using a function

In my JavaScript file, I have a function that retrieves a value asynchronously from the server: function retrieveValue(userId) { $.ajax({ type: "POST", url: "http://localhost/bghitn/web/app_dev.php/get_number_of_articles", data ...

What is the best way to make this relative path function in JavaScript?

My file structure is organized in the following way: multiple folders a subfolder _includes getStatisticsTable.php _templates StatisticsWrapper.html Within StatisticsWrapper.html, I am using jQuery's .get() method to fetch external data which ...

Enhance the efficiency of synchronized horizontal scrolling using React/Redux to boost overall performance

I'm currently working on creating a grid with synchronized horizontal scrolling across different sections (such as a header and multiple table sections below). Each section should scroll together horizontally, maintaining synchronization using a redux ...

Encountering a Vue-router error in the browser console following the execution of the command "npm update." The specific error message received states: "Module build failed: Error: ENOENT: no such file or

Previously, the project was functioning properly. However, after running the "npm update" command, an error appeared in the browser console: Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs& ...

The lifecycle of a React state in a filtering component

Seeking guidance on handling state updates in a component designed for filtering purposes (such as selecting dates, min/max values, etc). My current setup is as follows: onMinDateChange(minDate) { this.setState({minDate}); }, onMaxDateChange(maxDate) ...

Trouble accessing the Ionic SQLite database: Unable to open

I encountered some errors while attempting to connect my ionic app to a database. I am currently running the app on an android device using Google Chrome DevTools to troubleshoot the issue. Check out the createDatabase() function and the specific error th ...

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

Storing User IP Address in Database with Express and Mongoose

I'm looking for a way to store users' IP addresses in mongoDB by using a mongoose model file for the user. Does anyone have any suggestions on how I can achieve this? Here is an example of the schema for the Users module file: const userSchema ...

Issue: React child must be a valid object - Runtime Error Detected

As I delve into the world of React, NextJs, and TypeScript, I stumbled upon a tutorial on creating a navbar inspired by the 'Strip' style menu. It has been quite a learning journey for me as a newbie in these technologies. After seeking help for ...

Checking parameters from two forms that are both associated with the same model in Rails

Recently, a new feature was added to the system - a phone and sim checker. Users are required to input their phone number into the first form. If the phone number is found in the database, a message indicating this is displayed. Otherwise, the form switche ...

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

Is there a way to disable text selection in AngularJS when double-clicking using ng-dblclick?

My element has ng-dblclick='doSomthing()' functionality that is functioning correctly, however, it also selects the text in the element which is not visually appealing. Is there a way to avoid this issue? ...

Leveraging Components within Components in Vue 2

Here is the code snippet I am working with: import './menu-item'; import ItemImage from "./item-image"; Vue.component('quest-card', { props: { title: String, isFree: Boolean, points: Number, ...