Call v-on:click after append html in vuejs

Question

Can I have call onclick when after append html in vuejs, I using vue-append

this.html = '<div id="'+folderData[key].id+'" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' +
                    '<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" title="'+textTooltip+'"> '+ 
                        '<div class="info-box '+back+'">'+
                            '<span v-on:click="gofolder('+folderData[key].id+')" class="info-box-icon bg-success '+icon+'"></span>' +
                            '<div v-on:click="gofolder('+folderData[key].id+')" class="info-box-content">' + textName + '</div>' +
                            checkbox +
                        '</div>'+
                    '</a>' + 
                '</div>'

<template>
<div v-append.sync="html" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
                </div>
</template>

shaedrich · Accepted Answer · 2021-12-27 10:24:07Z

1

Can you just listen to @appended event?

<div v-append.sync="html" @appended="onClickHandler" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row"></div>

answered Dec 27, 2021 at 10:24

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Master Cat Over a year ago

thank you, but I did using v-for to load it, problem solved

Master Cat · Accepted Answer · 2021-12-29 10:01:49Z

0

I using v-for and an array to load, problem solved! Firstly, I will not using vue-append and create a frames html and using v-for to create a list follow array data, because my list data will changes if I click in button Ex:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
 <div :id="item.id" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" v-for="item in items" :key="item.id">
    <a href="#" class="nav-link" style="color:black" data-toggle="tooltip" :title="item.tooltip"> 
        <div class="info-box">
            <span @click="gofolder(item.id)" :class="item.icon"></span>
                <div @click="gofolder(item.id)" class="info-box-content">{{item.textName}}</div>
                <input v-if="item.checkbox === true" type="checkbox" class="" value="">
                 </div>
             </a>
            </div>
        </div>

specifically here: v-for="item in items" :key="item.id"

after, I can call event onclick on buttons then not be afraid it will take the wrong value

edited Dec 29, 2021 at 10:01

answered Dec 29, 2021 at 6:41

Master Cat

213 bronze badges

3 Comments

Peter Pointer Over a year ago

Hi! 👋🏻 It is unclear what you mean by this. Others which find your answer can learn from it if you explain what you did. Can you share code of the fix you found yourself?

Master Cat Over a year ago

Ok bro, let me edit it

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Call v-on:click after append html in vuejs

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related