Click Event on Dynamically Generated Button Don't get fired in Vue

Question

I am adding a button dynamically and attaching the click event but it doesn't seem to fire.

I see something similar on link below but its not exactly what I am looking for.

Vue: Bind click event to dynamically inserted content

    let importListComponent = new Vue({
el: '#import-list-component',
data: {
    files: [],
},
methods: {
// more methods here from 1 to 5

//6. dynamically create Card and Commit Button 
    showData: function (responseData) {
        let self = this;
        responseData.forEach((bmaSourceLog) => {
            $('#accordionOne').append(`<div class="main-card mb-1 card">
                                    <div class="card-header" id=heading${bmaSourceLog.bmaSourceLogId}>
                                         ${bmaSourceLog.fileName}
                                        <div class="btn-actions-pane-right actions-icon-btn">
                                        <input type="button" class="btn btn-outline-primary mr-2" value="Commit" v-on:click="commit(${bmaSourceLog.bmaSourceLogId})" />
                                        <a data-toggle="collapse" data-target="#collapse${ bmaSourceLog.bmaSourceLogId}" aria-expanded="false" aria-controls="collapse${bmaSourceLog.bmaSourceLogId}" class="btn-icon btn-icon-only btn btn-link">
                                        </a>
                                        </div>
                                    </div>
                                    <div id="collapse${ bmaSourceLog.bmaSourceLogId}" class="collapse show" aria-labelledby="heading${bmaSourceLog.bmaSourceLogId}" data-parent="#accordionOne">
                                        <div class="card-body">
                                            <div id="grid${ bmaSourceLog.bmaSourceLogId}" style="margin-bottom:30px"></div>
                                        </div>
                                    </div>
                                   </div>`);
        });
    },

//7. Commit Staging data 
    commit: function (responseData) {
        snackbar("Data Saved Successfully...", "bg-success");
    },
}});

I am adding button Commit as shown in code and want commit: function (responseData) to fire.

You shouldn't be modifying the DOM manually, let Vue do it (that's what Vue is for). The card template should be a part of your component's template, and you can render each card using v-for and v-bind, etc. — Decade Moon
– Decade Moon, Commented Aug 1, 2019 at 3:52
@DecadeMoon, this is a very valid point. I am mostly backend developer and have limited knowledge/experience with Vue. I should check out about these templates you are talking about in Vue. Any recommendation of where can i read or may be similar example of what I am trying to do here? — Sumeet
– Sumeet, Commented Aug 1, 2019 at 15:39

Sumeet · Accepted Answer · 2019-08-02 02:46:15Z

I was able to achieve this by pure Vue way. So my requirement was dynamically add content with a button and call a function from the button. I have achieved it like so.

Component Code

const users = [
{
    id: 1,
    name: 'James',
},
{
    id: 2,
    name: 'Fatima',
},
{
    id: 3,
    name: 'Xin',
}]
Vue.component('user-component', {
template: `  
<div class="main-card mb-1 card">
    <div class="card-header">
        Component Header
        <div class="btn-actions-pane-right actions-icon-btn">
            <input type="button" class="btn btn-outline-primary mr-2" value="Click Me" v-on:click="testme(user.id)" />
        </div>
    </div>
    <div class="card-body">
        {{user.name}}
    </div>
    <div class="card-footer">
        {{user.id}}
    </div>
</div>
`
,props: {
    user: Object
}
,
methods: {
    testme: function (id) {
        console.log(id);
    }
}});
let tc = new Vue({
el: '#test-component',
data: {
    users
},});

HTML

<div id="test-component">
    <user-component v-for="user in users" v-bind:key="user.id" :user="user" />
</div>

Collectives™ on Stack Overflow

Click Event on Dynamically Generated Button Don't get fired in Vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related