如何将外部脚本添加到 vue 组件？

Posted 2023-02-23

【中文标题】如何将外部脚本添加到 vue 组件？

【英文标题】：How to add external script to vue component?

【发布时间】：2019-04-12 08:54:21

【问题描述】：

我非常需要你的帮助... 我有一个 Vue 组件和端点，它为我提供了一个带有小菜单的脚本，并且该脚本包含一些操作。 所以，在我的脚本加载后，它的动作在页面上不起作用，我不知道为什么。 示例代码下方：

<template>
  <div id="menu"></div>
</template>

<script>
export default 
  name: 'HelloWorld',
  data () 
    return 
      msg: 'Welcome to Your Vue.js App'
    
  ,
  mounted () 
    // here I get a script which contains menu bar with actions
    // css and styles 
    this.$http.get("https://endpointwithscript.com/menu").then(response => 
      if (response.status === 200) 
        //in that case script doesn't work. Eg click
        var div = document.getElementById("menu")
        div.innerhtml += response.body;
        document.appendChild(div);
      
    )
  

</script>

如果我以这种方式插入我下载的脚本：

mounted () 
    this.$http.get("https://endpointwithscript.com/menu").then(response => 
      if (response.status === 200) 
        document.write(response.body);
      
    )
  

然后脚本工作，但另一个 html 元素被该脚本覆盖并且不显示。 如何下载脚本，将其插入页面并保留所有功能？ 谢谢！

【问题讨论】：

该脚本包含什么？

@BoussadjraBrahim 标签

这样您就可以使用该内容构建一个组件，导入它并在此代码中使用它

@BoussadjraBrahim 是的，这是个好主意。但是如何正确构建它。我可以使用 var div = document.getElementById("menu") div.innerHTML += response.body; document.appendChild(div);但随后操作不起作用

@BoussadjraBrahim 我明天可以提供。会好吗？

【参考方案1】：

<div class="menu"></div> var div = document.getElementById("menu")

您通过 ID 获取元素，但给了它一个类。将 div 更改为 <div id="menu"></div>

【讨论】：

谢谢。但这只是一个错字。

您可以尝试使用v-html 指令吗？ <span v-html="script"></span> 将 script 属性添加到组件数据中，然后在您获取脚本时将其分配给该属性并且组件应该更新。

@BrandonLyons Boussadjra Brahim 是对的。显示内容并保留事件功能的想法。

【参考方案2】：

您可以尝试将外部脚本添加到Mounted()

mounted() 
  let yourScript= document.createElement('script')
  yourScript.setAttribute('src', 'https://endpointwithscript.com/menu')
  document.head.appendChild(yourScript)
,

【参考方案3】：

您可以使用 v-html 将 HTML 代码包含到特定标签中。

似乎实现工作脚本的唯一方法是定义一个新的脚本元素。

这对我有用 https://jsfiddle.net/nh475cq2/

new Vue(
  el: "#app",
  mounted () 
  this.$http.get("https://gist.githubusercontent.com/blurrryy/8f7e9b6a74d1455b23989a7d5b094f3f/raw/921937ea99ff233dfc78add22e18868b32cd11c0/Test").then(res => 
  if(res.status === 200) 
    let scr = document.createElement('script');
    scr.innerHTML = res.body;
    document.body.appendChild(scr);
  
  )
  
)