Javascript не работает, когда я принес HTML-контент из Api с Vue

Question

У меня есть модал (начальная загрузка), где я пытаюсь заполнить контент по клику пользователя. У меня есть несколько продуктов, каждый из которых при нажатии должен загрузить сведения о продукте, быстрый просмотр.

Итак, мой HTML выглядит так:

<li class="">
   <a data-toggle="modal" v-on:click="loadProduct(<?=$pop->id?>, '<?=$language?>')" data-target="#productModal"  title="Quick View" class="quick-view modal-view detail-link" href="#">
   <span class="ti-plus"></span>
   </a>
</li>

Мой модальный HTML-код выглядит так:

<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal__container" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
              </div>
              <div class="modal-body">
                  <div id="modalProduct" class="">
                      <div class="modalContentTrigger">
                          <div v-if="modalLoading" class="text-center" style="color:#ccc">
                              <i class="fa fa-circle-o-notch fa-spin fa-5x" aria-hidden="true"></i>
                          </div>
                          <div v-if="!modalLoading">
                              <div v-html="modalContent"></div>
                          </div>
                      </div>
                  </div>
              </div>
      </div>
  </div>

Я пытаюсь передать содержимое HTML через вызов API и заполнить modalContent. Вот моя функция Vue в сочетании с AXios:

axios.post(vm.baseUrl + '/api/loadProduct', { productId: productId, language:language })
                      .then(function(response){
                        vm.modalContent = response.data;
                        vm.modalLoading = false;
                });

Содержание модала заполнено очень корректно, и я вижу HTML внутри модала, но какой бы ни был javascript внутри, он не работает. Например, простой <div id='mydiv' onClick='alert("hello");'>test</div>, полученный из API, не срабатывает при нажатии. Если я помещаю тот же код в статический HTML, то щелчок триггера работает отлично.

Я использую VUE2 / AXIOS для вышеуказанного кода.

Я даже пытался использовать Jquery для доступа к селектору, как это, но он снова не работает:

$("#mydiv").click(function(){alert('hello');});

Так что же я делаю неправильно, а содержимое, загружаемое динамически внутри модального режима, не поддерживает java-скрипт?

Answer 1

TLDR

$("body").on("click","#mydiv", function(){alert('hello');});

---

Vue не предназначен для использования таким образом. API-интерфейс также редко возвращает необработанный HTML. Vue не будет анализировать Javascript внутри шаблона. Фактически, если вы попытаетесь включить тег сценария в любой шаблон Vue, вы получите такую ​​ошибку:

Шаблоны должны отвечать только за отображение состояния в пользовательский интерфейс. Избегайте размещения тегов с побочными эффектами в ваших шаблонах, таких как , так как они не будут анализироваться.

Если вы можете, избегайте использования v-html, измените ответ API, чтобы он возвращал только данные, необходимые для построения HTML, а не весь необработанный HTML. И вы используете данные внутри шаблона Vue.

Но если вы не можете, вы можете продолжать пытаться использовать jquery для прослушивания события click.

$("#mydiv").click(function(){alert('hello');}); не работает, вероятно, потому что эта строка выполняется до создания #mydiv.

Это должно работать для вас:

$("body").on("click","#mydiv", function(){alert('hello');});

Прислушивается к событию click для body и выполняет обратный вызов click, если цель click #mydiv.