Importing third party javascript to vuejs

Question

I want to import this javascript code in my vuejs

<script type="text/javascript">
  (function(d, src, c) {
    var t = d.scripts[d.scripts.length - 1],
      s = d.createElement('script');
    s.id = 'la_x2s6df8d';
    s.async = true;
    s.src = src;
    s.onload = s.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && (rs != 'complete') && (rs != 'loaded')) {
        return;
      }
      c(this);
    };
    t.parentElement.insertBefore(s, t.nextSibling);
  })(document,
    'https://support.51talk.com/scripts/track.js',
    function(e) {
      LiveAgent.createButton('a9e5ab3f', e);
    });
</script>

It's a ladesk live agent code. When I paste it on my vuejs template I always get an error

All I want is to apply it like this I import the code the use it on the template like this:

here' my entire script on a single page and underneath this script were I deploy the third party javascript.

<script>
export default {
  name: "tools",
  components: {

  },
  data: function() {
    return {
      topten: [],
      outage: [],
      outagetop: [],
      showUserModal: false,
      type: "",
    };
  },
  methods: {
   AdvisoryList() {
     this.type = this.$route.params.type;

      this.$http
        .get(process.env.VUE_APP_API_BASE_URL + "/info/topten?type=" + this.type)
        .then(response => {
          this.topten = response.data.response.data;
        })
        .catch(error => {
          this.modalmessage = "Error Fetching Data.";
          this.showMessageModal = true;
        });
    },
    KnowledgebaseList(id) {
      this.$http
        .get(process.env.VUE_APP_API_BASE_URL + "/info/knowledgebases/" + id)
        .then(response => {
          this.title = response.data.response.title;
          this.categoryname = response.data.response.category;
          this.subcategoryname = response.data.response.sub_category;
          this.content = response.data.response.content;
          this.showUserModal = true;
        })
        .catch(error => {
          this.modalmessage = "Error Fetching Data.";
          this.showMessageModal = true;
        });
    },
    OutageList() {
      this.$http
        .get(process.env.VUE_APP_API_BASE_URL + "/info/outage")
        .then(response => {
          this.outage = response.data.response.data;
        })
        .catch(error => {
          this.modalmessage = "Error Fetching Data.";
          this.showMessageModal = true;
        });
    },
    Outagetop() {
      this.type = this.$route.params.type;
      this.$http
        .get(process.env.VUE_APP_API_BASE_URL + "/info/outage/topten?type=" + this.type)
        .then(response => {
          this.outagetop = response.data.response.data;
        })
        .catch(error => {
          this.modalmessage = "Error Fetching Data.";
          this.showMessageModal = true;
        });
    },
  },
  mounted() {
    this.AdvisoryList();
    this.OutageList();
    this.Outagetop();
  },
};
</script>

I'm also having an error. some of my methods didn't work when I deploy it

Answer 1

Did you added the script code inside the <template></template> tags? If yes, then you have to remove the code from <template></template> and place it after the ending of template.

Answer 2

您可以在 head 标签下的 index.html 文件中导入脚本。

Answer 3

我只是创建一个函数并将实时代理脚本放在上面