我想从vuejs和laravel中的页面中删除一个脚本标签

Question

我正在为该组件中的更多功能添加一个特殊的脚本文件，但是当我更改组件时，我想删除脚本标记。

以下方法用于在vue组件中添加脚本标签。

created() {
    this.dynamicallyLoadScript("/assets/libs/moment/moment.min.js");s
},
methods: {
    dynamicallyLoadScript(url) {
        var script = document.createElement("script");
        script.src = url;

        document.body.appendChild(script);
    }
}

现在，当我更改组件时，我想删除该脚本。帮我怎么做？

Answer 1

您可以为该脚本标记添加一个id，然后在destroy（）方法中，可以使该脚本通过id调用并删除。

Answer 2

您可以收听beforeDestroy生命周期方法并从文档中删除脚本。

为此，您需要将appendChild创建的DOM元素保存在Vue组件中，并在beforeDestroy生命周期中删除脚本标签。

methods: {
    dynamicallyLoadScript(url) {
        var script = document.createElement("script");
        script.src = url;

        this.scriptEle = document.body.appendChild(script);
    }
}

beforeDestroy() {
  document.body.removeChild(this.scriptEle);
}