Generating @click handlers dynamically within a v-for loop

I am working on populating a v-menu in Vuetify with an array passed as a prop to be used in a v-for loop. Each menu item needs to have @click events assigned, and the names of the functions are provided in the array as strings (for example, the "CanResolve" event seen in the parent component). These function names are then inserted into the v-on:click="item.clickFunctions" for each menu button. Currently, I am storing the functions in the child component, which is not functioning as expected. My ultimate goal is to store these functions in the parent component and have the @click events call them if possible. An example is the myButtonEventHandler method stored in the parent component, supposed to be triggered by the CanResolve event in the child component. However, this event is not being triggered when dynamically created in the v-for loop and @click.

The child component contains a menu that requires click events based on props:

            <v-menu bottom
                    right>
                <template v-slot:activator="{ on, attrs }">
                    <v-btn light
                           icon
                           v-bind="attrs"
                           v-on="on">
                        <v-icon>mdi-dots-vertical</v-icon>
                    </v-btn>
                </template>
                <v-list>
                    <template v-for="(item,index) in menus">
                        <v-list-item v-if="item.isActive" :key="index" link>
                            <v-list-item-title @click="$emit(item.clickFunction)">{{item.title}}</v-list-item-title>
                        </v-list-item>
                    </template>
                    <v-list-item :href="docxLocation(filedir)" download link>
                        <v-list-item-title>Download</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>

Here is how the component is implemented in the parent component:

<embeddedPDF @CanResolve ="myButtonEventHandler" v-bind:filedir="pdfLocation(item.Draft_Path)" v-bind:canvasid="'draft-canvas-'+item.Round" :menus="menuItemsArray[item.Round-1].menus"></embeddedPDF>

Answer №1

To send data from a child component to its parent in Vue.js, you need to use the emit event. Simply add the emit event in the child component and pass the data you want to send as the second parameter.

In the parent component, you can then receive this event and assign it to a function for further processing. Here's an example:

Child Component

`

<div v-for=" { item, idx } in items " :key="item.id">
    <button @click="$emit('handleItemClick', idx)">{{ item }}</button>
</div>

`

Parent Component Template

<div>
    <ChildComponent @handleItemClick="handleChildItemClick" />
</div>

Parent Component Methods

methods: {
    handleChildItemClick(idx) {
        console.log(idx);
    },
},

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

A guide on accessing $bvToast in Vue class components

I am fairly new to vue.js but I have managed to figure out some things. I initially started with regular js, but then transitioned to typescript with class style vue components. For styling the components, I rely on bootstrap-vue. In my main.ts file, I im ...

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

By default, have jQuery disabled input fields

I am looking to set the inputs to be disabled by default, and I have created a checkbox that will enable them when checked. Here is the code for the checkbox functionality: function toggleStatus() { if ($('#toggleElement').is(':checked&ap ...

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

Struggling with hashtags and ampersands in Angular when making an HTTP request

Dealing with Special Characters # and & in Angular's http.get() Request URL Take a look at my code first. Angular Service let versionsearch = "&"; let strweeksearch = "%23"; this.http.get(this.apiUrl + 'GetVersionInfo?vehicleVersion=' + v ...

Display information retrieved from a PHP request on an AngularJS webpage

I could really use some assistance upfront! I am facing issues with displaying the data retrieved from PHP on an AngularJS website. I have reviewed previous discussions on this topic, but unfortunately, none of them have proven helpful. From what I can te ...

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...

How can I preserve the file extension of an ejs file as .html?

I'm in the process of building an expressjs application using the ejs template engine. However, I'd like to retain the file extension as .html instead of using .ejs. The main reason for this is that I am using Visual Studio for my development wor ...

Convert AngularJS JSON.stringify to PHP

I am looking to pass additional data to the PHP script along with the form values. I have a JavaScript function called "cart.items()" that returns a string of items selected in the cart. How can I send this value to the PHP function? form.html ...

Is there a glitch with child margins in a relative-absolute positioning setup?

Could someone shed some light on how I can prevent the margin from one sibling div affecting another? The browser's layout seems a bit baffling to me in this scenario. I'm attempting to position the yellow box relative to its parent, but the pre ...

Ways to switch text on and off smoothly using transitions

I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling ins ...

Utilizing nested JSON data with React

Hey there! I've been working on adding more levels in Json pulled from Mongo, but I'm running into an issue with accessing elements that have multiple levels of nesting. It seems like it can't read the undefined property. Is there a limit t ...

Retrieving files by their unique IDs from a Firestore database collection

While working with Firestore, vuefire, and vue-tables-2, I encountered an issue while trying to retrieve the document's id. Below is my data structure. https://i.sstatic.net/mQat6.png Take a look at my code snippet: <v-client-table :columns="c ...

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

If the rowcount is 0, I need to send a response as failed. If the rowcount is 1, I need to send a success status. Can someone please assist me with this? When I try to print (client.query), it displays the result in JSON format (refer to attached image). ...

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

AngularJS is displaying a blank Galleria when images fail to load

I have a code snippet similar to the following var dummyAlbum = [ {image: 'http://i.imgur.com/7Osllxil.jpg'}, {image: 'http://i.imgur.com/YACmI1G.jpg'}, {image: 'http://i.imgur.com/af4ZDy8.jpg'}, {image: &apos ...

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

Is it possible to condense the coding of a vast array of objects into a more concise format?

Currently working on a personal project in react.js and aiming to write cleaner code. Is there a way to condense this code into just two lines or something similar? I attempted to create objects of arrays like const apps= {app_name:['Maps',&apo ...

What is the purpose of using a single pipe character within a Vue.js template handlebar expression?

Here is a sample code snippet: <div> {{ name | capitalize }} </div> I have searched through the documentation for vuejs and handlebars, but couldn't find any relevant information. ...