VUE: как верно обрабатывать события при работе с AXIOS и PHP?

Question

[puesmania]

Добрый вечер.
Коллеги, выручайте! Всю голову уже сломал! Задача банальная: передать набор id (собранных посредствами Vue) обычному php-скрипту, который сделает выборку из базы mysql и вернёт нужные наименования полей.
Для упрощения понимания максимально упрощу пример:

Имеем вот такой запрос:

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

PHP-скрипт получает запрос и возвращает строку:

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

Фраза "Подгрузили" в js-код приходит. НО! Vue-скрипт почему-то не воспринимает директиву v-on, а тупо выводит его в коде как есть и не вешает на него событие. Помогите победить проблему, плиз. (((

PS: 1) естественно в app всё обёрнуто верно
2) функция testClick создана
3) если без прогрузки из php-скрипта вставлять строчку - работает как часы.

Answer 1

[Александр Дроздов]

Вот сниппет, по сути компилирует хтмл с vue который пришел с сервера.

Просто так после инициализации vue работать не будет.

/**
 * Компонент который может скомпилить хтмл строку с кастом компонентами внутри
 * <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

[Антон Александров]

Используйте v-model="resultBuyGenset", т.к. директива v-on не умеет дожидаться ответа промиса.

Comments

[puesmania]

А, что мне это даст? Мне необходимо обрабатывать событие по клику.

[Антон Александров]

puesmania, сорри, не сразу понял суть вопроса. А вот так тоже событие не навешивается? @click=\"testClick(777)\"

[puesmania]

Антон Александров, неа. В DOM v-on отображается. Но, не обрабатывается :-(

[puesmania]

Антон Александров, данный AJAX-подгружаются. Нет ли аналога $(document).on в Vue ?

[Антон Александров]

puesmania, @click - это же и есть v-on:click.
Если навешивать события, то можно использовать addEventListener

[Антон Александров]

puesmania, есть ещё вот такая штука. Как раз подойдет для данного случая.
https://github.com/alexjoverm/v-runtime-template

[puesmania]

Антон Александров, спасибо. Сейчас буду изучать, что это за штука!