v-on:click not working - dynamically added html element

Question

I am trying to get all images for a category using Vue

 <div class="col-md-12 col-sm-2 p-2">
  <a v-on:click="onCategoryManageImageClick($event)"  data-target="#location- 
  category-images">
 </span>
  </a>
 </div>

So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.

this is index.js

      methods:{
        onImagesTabClick(){
        this.$root.$emit('activated-tab:location-images');
    },
    onCategoriesTabClick(){
        window.j1App.eventBus.$emit("j1-location-image-list:shown");
    },
    onCategoryManageImageClick: function(event) {console.log('working event..');
        event.preventDefault();
        window.j1App.eventBus.$emit("j1-location-category-image- 
 list:shown",event.currentTarget.id);
    }
}

So basically it need to to work like we do in jQuery

$(document).on('click',function{
   })

So it works either page load or if adding any new html element on DOM. same I want in Vue.

How do you add the HTML block? It does not show it the vue template, which would be the obvious way to do it. — Reynicke
– Reynicke, Commented Aug 20, 2020 at 9:32
I am adding html block using twig template, and then that block has the v-on:clcik atatched — Sunil Rawat
– Sunil Rawat, Commented Aug 20, 2020 at 9:34
<div class="col-md-12 col-sm-2 p-2"> <a v-on:click="onCategoryManageImageClick($event)" data-target="#location- category-images"> </a> </div> this is the html block get added once user add more button — Sunil Rawat
– Sunil Rawat, Commented Aug 20, 2020 at 9:42

tony19 · Accepted Answer · 2022-07-15 05:11:06Z

1

You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.

The correct way of doing this would be to add those new elements in Vue.

<div 
  class="col-md-12 col-sm-2 p-2"
  v-for="item in items" 
  :key="item.id"
>
  <a 
     v-on:click="onCategoryManageImageClick($event, item)"  
     data-target="#location-category-images"
  >
  </a>
</div>

See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.

edited Jul 15, 2022 at 5:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 20, 2020 at 9:55

Reynicke

1,5882 gold badges14 silver badges24 bronze badges

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

1 Comment

Sunil Rawat Over a year ago

But I am using vue with twig templates, So I wonder how its works on page laod?

Rohan Lamb · Accepted Answer · 2020-08-20 09:50:14Z

0

Try raplacing your a tag with p

 <div class="col-md-12 col-sm-2 p-2">
  <p v-on:click="onCategoryManageImageClick"  data-target="#location- 
  category-images">
  </p>
 </div>

edited Aug 20, 2020 at 9:50

answered Aug 20, 2020 at 8:44

Rohan Lamb

1415 bronze badges

7 Comments

Sunil Rawat Over a year ago

OK let me try that

Sunil Rawat Over a year ago

ReferenceError: item is not defined

Rohan Lamb Over a year ago

Hey, sorry that I got lost in stuff. Just use p tag and event like this v-on:click="onCategoryManageImageClick". It will work for sure.

Sunil Rawat Over a year ago

and I need id of current clicked button so used onCategoryManageImageClick($event) if you say to sue it just onCategoryManageImageClick then how can I get current clicked button ID ?

Rohan Lamb Over a year ago

You can access the event inside method without passing it as function($event){}. Here is a pen that i created for reference. codepen.io/lambrohan/pen/oNxzRaN

|

Collectives™ on Stack Overflow

v-on:click not working - dynamically added html element

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related