当我使用 Vue 从 Api 带来 html 内容时，Javascript 未运行

Posted 2023-02-22

【中文标题】当我使用 Vue 从 Api 带来 html 内容时，Javascript 未运行

【英文标题】：Javascript not running when i bring html content from Api with Vue

【发布时间】：2018-10-11 07:18:29

【问题描述】：

我有一个模式（引导程序），我试图在其中填充用户的内容。我有多个产品，每次点击都应该加载产品详细信息快速查看。

所以我的 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>

我正在尝试通过 API 调用引入 HTML 内容并填充 modalContent。这是我结合 AXios 的 vue 函数：

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

模态框的内容填充得非常正确，我看到模态框内的 HTML，但无论里面的 javascript 是什么，它都不起作用。 例如，来自 API 的简单 <div id='mydiv' onClick='alert("hello");'>test</div> 不会在点击时触发。如果我将相同的代码放在静态 HTML 中，则触发点击效果很好。

我在上面的代码中使用 VUE2/AXIOS。

我什至尝试使用 Jquery 来访问这样的选择器，但它不再工作了：

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

那么我做错了什么并且在模态中动态加载的内容不是java脚本友好的？

【参考方案1】：

TLDR

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

---

Vue 不是为这种方式设计的。 API 返回原始 HTML 也是不常见的。 Vue 不会解析模板内的 Javascript。事实上，如果你尝试在任何 Vue 模板中包含脚本标签，你会得到这个错误：

模板应该只负责将状态映射到 UI。 避免在模板中放置带有副作用的标签，例如 ，因为它们不会被解析。

如果可以，请避免使用v-html，更改 API 响应，使其仅返回您构建 HTML 所需的数据，而不是整个原始 HTML。而你使用 Vue 模板中的数据。

但是如果不能，可以继续尝试使用jquery来监听点击事件。

$("#mydiv").click(function()alert('hello');); 不起作用可能是因为此行是在创建 #mydiv 之前执行的。

这应该适合你：

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

监听body的点击事件，如果点击目标为#mydiv，则执行点击回调。