VUE: how to correctly handle events when working with AXIOS and PHP?

Question

Vue.js

Good evening.
Colleagues, help out! I've already broken my head! The task is banal: to pass a set of id (collected through Vue) to a regular php script that will make a selection from the mysql database and return the necessary field names.
To simplify understanding, I will simplify the example as much as possible:

We have the following query:

loadResult: function() {
        axios({
              method: 'post',
              url: 'ses.php',
              data: {
                  genset: JSON.stringify(this.genset)
              }
           })
          .then(response=> {
            this.resultBuyGenset = response.data;
           })
      }

The PHP script receives the request and returns a string:

echo "<div style=\"color: blue; cursor: pointer;\" v-on:click=\"testClick(777)\">Подгрузили!</div>";

The phrase "Loaded" in the js-code comes. BUT! For some reason, the Vue script does not accept the v-on directive, but stupidly displays it in the code as it is and does not hang an event on it. Help to overcome the problem, pliz. (((

PS: 1) of course, everything is wrapped correctly in the app
2) the testClick function has been created
3) if you insert a line from a php script without loading it, it works like clockwork.

Answer 1

Here is a snippet that essentially compiles the html with vue that came from the server.
Just like that, after the initialization of vue, it will not work.

/**
 * Компонент который может скомпилить хтмл строку с кастом компонентами внутри
 * <dynamic-html template="<div title='sdff' @click='alert(123)'/>" />
 */
export default {
  functional: true,
  props: {
    template: String,
    data: { type: Object, default: () => ({}) }
  },
  render(h, context) {
    const template = context.props.template;
    const dynComponent = {
      template,
      data() {
        return context.props.data;
      }
    };
    const component = template
      ? dynComponent
      : {
          template: `<div>Loading...</div>`
        };
    return h(component);
  }
};

Answer 2

Use v-model="resultBuyGenset" as the v-on directive does not know how to wait for a promise response.