1

I'm creating a website with vue.Js (vue.cli) to show some of my work.

Actually all the interactions and experiments are made in a iframe, because I don't understand how to load and use external javascript

For example in one of my components I would like to use gio.js. To use it you need to call 4 libraries:

So actually I write that in my component, but nothing works:

So, I would like to proper load external js files, and write regular js in my components or in an externals files. 

<template>
  <div class="planet"> 
//globalArea is for render the planisphere
 <div id="globalArea"></div>
  </div>
</template>

<script>
export default {
  mounted() {
 let jqueryScript = document.createElement('script')
    jqueryScript.setAttribute('src', 'https://code.jquery.com/jquery-3.3.1.slim.min.js')
    document.head.appendChild(jqueryScript);
   let threeScript = document.createElement('script')
    threeScript.setAttribute('src', 'https://threejs.org/build/three.min.js')
    document.head.appendChild(threeScript);
 let gioScript = document.createElement('script')
    gioScript.setAttribute('src', 'https://raw.githack.com/syt123450/giojs/master/build/gio.min.js')
    document.head.appendChild(gioScript);
     let dataScript = document.createElement('script')
    dataScript.setAttribute('src', 'https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js"')
    document.head.appendChild(dataScript);
  }
  methods: {
// Get the container to hold the IO globe
var container = document.getElementById( "globalArea" );
// Create Gio.controller
var controller = new GIO.Controller( container );
// Add data
controller.addData( data );
// Initialize and render the globe
controller.init();

  }
}
</script>
Zobia Kanwal
  • 4,085
  • 4
  • 15
  • 38
Wkr Washere
  • 11
  • 1
  • Are you building your project with single-file components, or you are using Vue compiler with inline HTML templates ? – IVO GELOV Apr 03 '19 at 16:42

1 Answers1

1

You have a common error, the methods properties is an object that carries all the methods you want to define for example: 

export default {
  methods: {
    myFirstMethod () {
      //code goes here
    },
    mySecondMethod () {
      //code goes here
    },
  }
}

If you want to initialize your data when the component is shown you can load the scripts on the beforeCreate hook and paste your code on the mounted hook. Here is how it should look:

var app = new Vue({
 el: '#app',
  beforeCreate() {
    let jqueryScript = document.createElement('script')
    jqueryScript.setAttribute('src', '//code.jquery.com/jquery-3.3.1.slim.min.js')
    document.head.appendChild(jqueryScript);
    let threeScript = document.createElement('script')
    threeScript.setAttribute('src', '//threejs.org/build/three.min.js')
    document.head.appendChild(threeScript);
    let gioScript = document.createElement('script')
    gioScript.setAttribute('src', '//raw.githack.com/syt123450/giojs/master/build/gio.min.js')
    document.head.appendChild(gioScript);
    let dataScript = document.createElement('script')
    dataScript.setAttribute('src', '//raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js')
    document.head.appendChild(dataScript);
  },
  mounted() {
  
    setTimeout(() => {
        // Get the container to hold the IO globe
      var container = document.getElementById( "globalArea" );
      // Create Gio.controller
      var controller = new GIO.Controller( container );
      // Add data
      controller.addData( data );
      // Initialize and render the globe
      controller.init();
    }, 2000)
    
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="planet"> 
    //globalArea is for render the planisphere
    <div id="globalArea" style="height: 500px"></div>
  </div>
</div>

Also keep in mind that you can only access those scripts when they are fully loaded, that's why I'm using a setTimeout with 2 seconds of delay.

Tadeo Hndz
  • 46
  • 6