I can't use a JS script in my HTML with Vue js

Question

Good afternoon !

I have develop a node js server and now I would like to display a html file that contains a Vue script which load a data thanks to another method written in another JS file.

But when I try to load my html file on my browser, I have this error : ReferenceError: NbRequest is not defined

My html :

<div id="PRISME_data">
    Le nombre de requête est de  : {{ nb_request }}<br>
    <button v-on:click="change">change</button>
</div>

<script>    
    let app = new Vue({
       el:'#PRISME_data',
       data: {
          nb_request: 0
       },
       methods: {
          change: function() {
          changeNbRequest()
          }
       }
     });

     changeNbRequest = function() {
     var timer = setInterval(function() {
           app.nb_request = new NbRequest().returnRandomNumber();
        }, 5000);
     }
 </script> 

And my other JS file (NbRequest.js) :

var cron = require('cron');
var fs = require('fs');

class NbRequest {
    returnRandomNumber() {
        return Math.floor((Math.random() * 5000) + 500);
    }
}

Of course I have added the script definition :

<script src="../NbRequest.js"></script>

I don't know if I am really clear, but can you help me ?

Thanks a lot !!

Answer 1

You are loading your class after your Vue variable.

Try putting <script src="../NbRequest.js"></script> first and then

<script>    
    let app = new Vue({
          .....