vuejs挂载createElement动态值问题

Question

您好，我正在尝试将json文件中的动态值添加到vuejs组件中的脚本标记中，但我无法让它工作。我不知道我做错了什么？

import privateToursData from '@/data/privateToursData.json'

export default {
  data() {
    return {
      privateTour: privateToursData,
 }
}
 mounted () {
    const plugin = document.createElement("script");
    plugin.setAttribute(
        "src",
        `${this.privateTour.bokunStandardScript}`
    );
    plugin.async = true;
    document.head.appendChild(plugin);

  }
}

Answer 1

检查您的数据，并在脚本标记中使用源代码。它是正确的，并且适用于硬编码的源/链接。

您需要将其设置为js对象，或者将json fetch()为XHR请求，以便在运行时加载。如果你的值是硬编码的，最好使用js对象。

import  {jsonData}  from "./data.js"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
    mounted : function () {
    const plugin = document.createElement("script");
    plugin.setAttribute(
        "src",
        jsonData.link
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
  
}

data.js

export const jsonData =  {
  "link": "https://code.jquery.com/jquery-3.6.0.slim.min.js"
}

下面是完整的实现：stackblitz