How to make vue directive work in dynamically added element?

Question

JavaScript

There is a piece of html code that vue.js outputs through the v-html directive with an ajax request
, inside there is a v-on: click directive that calls the method, but it does not work. How to hang an event handler?

Answer 1

You are going against the v-html directive.
It is worth either complicating the template (rejecting v-html), or hanging a handler higher in the DOM on the parent container and checking event.target.

Answer 2

If you have @click inside the resulting fragment, then judging by the dock, it will not work:

Note that the content is pasted as plain HTML - that is, it is not compiled as a Vue template. Don't organize nested templates with v-html, try using components instead.