VUE add onclick event to dynamically created element

Question

I'm trying to add @click event to dynamically created element. My code is:

const app = Vue.createApp({
 data() {
  return {
   myID: 24,
  };
 },

 ...

 methods: {
  mymethod(ID) {
   ...
 },
  otherFunction() {
   ...
   dom.innerHTML += `<div onclick="mymethod(${this.myID})"></div>`;
  }
});

So after clicking at div the console says 'alert is not defined'. My question is how to target this method or is there a better way of creating element dynamically?

Thank you :)

Does this answer your question? Create an element dynamically in Vue.js — Neha Soni
– Neha Soni, Commented Dec 21, 2022 at 15:06

Daniel · Accepted Answer · 2022-12-21 20:42:02Z

1

Do not mutate DOM directly!

This is really, really important for FE frameworks like Vue. While mutating the DOM directly is possible, it's going to cause all kinds of problems.

Before addressing how to add an onclick listener, you should consider what your goal is and then pick the solution for your needs.

Most likely you can solve this within the template syntax. If not, you can also use JSX or render functions. If there is a particular reason why you need to include something like dom.innerHTML, can you include it in the question?

answered Dec 21, 2022 at 20:42

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

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

2 Comments

Matredok Over a year ago

Hey thank's for advice. I'm trying to add a popup to a marker in Leaflet. I know there is a VUE Leaflet but can't use it in this case. So the code is L.marker(...).bindPopup('<div onclick="function"></div>');

Daniel Over a year ago

have you looked at the examples already? github.com/vue-leaflet/vue-leaflet/blob/master/src/playground/…

user20832750 · Accepted Answer · 2022-12-21 14:59:28Z

0

Try this out. <div onclick="window.alert(${this.myID})"></div>

answered Dec 21, 2022 at 14:59

user20832750

1

3 Comments

Matredok Over a year ago

Oh sorry but It was only a sample method.

user20832750 Over a year ago

Try out some of vue's built in functionality for dynamic addition / removal of elements to the dom. <div v-if="someBoolean" @click="someFunction"></div>

Maximus Over a year ago

Try moving the myID to created instead on data.

Collectives™ on Stack Overflow

VUE add onclick event to dynamically created element

2 Answers 2

Do not mutate DOM directly!

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Do not mutate DOM directly!

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related