Question

我正在动态添加一个按钮并附加click事件，但它似乎没有触发。

我在下面的链接中看到类似的内容，但与我所寻找的不完全相同。

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");
    },
}});

我正在添加代码中所示的Commit按钮，并希望触发commit：函数（responseData）。

Answer 1

我能够通过纯粹的Vue方式实现这一目标。因此，我的要求是使用按钮动态添加内容并从该按钮调用函数。我已经做到了。

组件代码

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>

动态生成的按钮上的Click事件不要在Vue中触发

1 个答案: