CODEWITHSUNDEEP
javascriptvue.js
Master Cat
Master Cat

Reputation: 21

Call v-on:click after append html in vuejs

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>

Upvotes: 2

Views: 199

Answers (2)

Master Cat
Master Cat

Reputation: 21

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

Upvotes: 0

shaedrich
shaedrich

Reputation: 5735

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>

Upvotes: 1

Related Questions