Question

我非常需要您的帮助... 我有一个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元素被该脚本覆盖并且不显示。如何下载脚本，将其插入页面并保留所有功能？谢谢！

Answer 1

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

您正在按ID抓取元素，但是给了它一个类。将div更改为<div id="menu"></div>

Answer 2

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

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

Answer 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);
  }
  })
  }
})

如何在vue组件中添加外部脚本？

3 个答案: