0

i'm trying to load local script and external script in vue.js. Initially, I loaded external script in 'mounted' and loaded local script in top of export default. However, i had an error saying somes values or functions inside the local script is not defined. I believe it's because the local script which is using some functions in external script is loaded first before the external script is fully loaded. So, i remove the import local script, and put it in 'mounted' when the external script is fully loaded. Then, it worked successfully. However, when i try to use the functions from the local script, now it says the functions updateNode() and updateEdge() are not defined. I tried to change them to this.updateNode() or window(s).updateNode() or m.updateNode(), but none of them worked. How can i call the functions? i tried to copy the functions from script in method, but not quite successful.

<template>
  <div class="text-center aParent">
    <div id="mynetwork"></div>
    <div class="add_box">
      <h2>add node</h2>
      node id (int)<input type="text" id="newID"><br>
      label text (text)<input type="text" id="newLabel"><br>
      <input type="button" value="Update" @click="updateNode()">
      
      <h2>add edge</h2> 
      from id (int)<input type="text" id="newEdgeFromID"><br>
      to id (int)<input type="text" id="newEdgeToID"><br>
      edge text (text)<input type="text" id="newEdgeLabel"><br>
      <input type="button" value="Update" @click="updateEdge()">
    </div>
  </div>
</template>
<script>

mounted() {
    // Network initialization code goes here
    let externalScript = document.createElement('script')
    externalScript.setAttribute('src', 'https://unpkg.com/vis-network/standalone/umd/vis-network.min.js')
    document.head.appendChild(externalScript)
    externalScript.onload = () => {
      import('../../../backend/src/resources/js/questionTree').then(m => {
        
      });
    }
  }

edit

this is the functions that i want to call from questionTree.js

function updateNode(){
    var inputID = parseInt(document.getElementById("newID").value)
    var inputLabel = document.getElementById("newLabel").value
    var pushData = addNodeAttribute({id: inputID, label: inputLabel})
    nodes.update(addNodeAttribute(pushData))
}

function updateEdge(){
    var inputFromID = parseInt(document.getElementById("newEdgeFromID").value)
    var inputToID= parseInt(document.getElementById("newEdgeToID").value)
    var inputLabel = document.getElementById("newEdgeLabel").value
    var pushData = {from: inputFromID, to: inputToID, label: inputLabel}
    edges.update(addEdgeAttribute(pushData))
}

function addNodeAttribute(node){
    node.shape = "box"
    node.physics = false
    node.title = "node ID:\n" + node.id

    if (node.qa == "q"){
        node.color = {border:"black",
                      background:"lightgray",
                      highlight:{
                          border: "red",
                          background: "orange"}}

    }else{        
        node.color = {border:"black",
                      background:"lightblue",
                      highlight:{
                          border: "red",
                          background: "orange"}}
    }
    return node
maz32
  • 127
  • 1
  • 13
  • is `updateEdge()` the same as the `Example: network.clustering.updateEdge(...);` from the [documentation](https://visjs.github.io/vis-network/docs/network/) of that package or where does that come from? – zapl Dec 20 '22 at 03:12
  • oh sorry. The updateEdge and updateNode came from that documentation of the package that u linked. – maz32 Dec 20 '22 at 03:22
  • your usage of that package doesn't look anything like in the documentation. There's no `updateNode()` that I can see and the methods are meant to be called on the network object (e.g. `var network = new vis.Network(container, data, options);` in the [examples](https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html) - there you have a `network.clustering.updateEdge` function that also requires parameters from what I can see). – zapl Dec 20 '22 at 03:34
  • `document.createElement('script')` seems quite hacky. Why not use [a dynamic import](https://stackoverflow.com/a/67825061/8816585)? Far more adapted in that use-case IMO. – kissu Dec 20 '22 at 03:39
  • @zapl i'm so sorry to confuse you. Actually they have same name but they are different functions. I made a script named questionTree.js and they are from the script. I updated them in the question page. – maz32 Dec 20 '22 at 03:48
  • @kissu thanks for suggestion. i tried it but dynamic import seems not working properly for external script – maz32 Dec 20 '22 at 03:51
  • Indeed but why do you even use a CDN there? It will always be worse than the [NPM version](https://www.npmjs.com/package/vis-network) of it. – kissu Dec 20 '22 at 04:04
  • i tried npm install vis-network but somehow it deleted some other files and crashed. so i decided to use CDN – maz32 Dec 20 '22 at 04:43
  • Being more specific here could help. Use an NPM package rather than a CDN. Especially if your only reason is the one you gave. Properly debugging that is far better than starting something hacky because of it. – kissu Dec 20 '22 at 05:06

0 Answers0