Vue中如何通过函数实现点击按钮动态添加脚本？已尝试InnerHTML和Node方法未成功求解决方案

嘿，我来帮你搞定这个问题——你当前的代码有几个明显的问题，导致脚本没法正常执行，我一步步给你拆解并修正：

先说说你代码里的核心问题： #

• document.innerHTML是错误用法！document对象根本没有这个属性，你应该操作具体的DOM元素（比如document.body）。
• 你把<script>标签的尖括号转义成了<和>，这样插入到页面里的只是纯文本，不是能执行的脚本标签。
• 就算你正确用innerHTML插入<script>，大多数浏览器也不会执行这种方式添加的脚本——这是浏览器的安全策略，防止恶意代码注入。

正确的实现方法 #

动态执行脚本最可靠的方式是直接创建<script>元素，把代码内容赋值给它，再插入到DOM中。下面是修正后的代码：

addGtmScript: function(company) {
  // 创建一个新的script元素
  const gtmScript = document.createElement('script');
  
  // 写入GTM逻辑，注意字符串类型的company要加引号避免语法错误
  gtmScript.textContent = `
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'register-form-ok',
      'company': '${company}',
    });
  `;
  
  // 把脚本插入到body末尾，浏览器会自动执行它
  document.body.appendChild(gtmScript);
}

更简洁的优化方案 #

其实你根本不需要动态创建脚本标签！你要做的只是往dataLayer里push数据，直接在函数里执行这段逻辑就行，完全没必要额外创建脚本：

addGtmScript: function(company) {
  // 直接在当前上下文执行push操作，高效又简洁
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'register-form-ok',
    'company': company,
  });
}

这种方式不仅避免了DOM操作的开销，还彻底规避了动态脚本可能带来的执行问题，是最优解。

额外注意事项 #

如果company是字符串类型，一定要给它加上引号（单双引号均可），不然如果company包含空格、特殊字符，会直接触发JS语法错误；如果是数字类型，则不需要加引号。

内容的提问来源于stack exchange，提问作者Antoine Kurka