Vue javascript application not calling app.js

Question

Am just starting with Vue.js and ui development, and I am trying to make a very simple vue.js call. However, when I am launching my html page using liveserver on Visual Studio Code no JavaScript function is getting called from app.js. I cant figure out what is wrong with the code.

Can someone please advise? Vue included in HTML-

 <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
  href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
  rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>

app.js code -

function getRandomValue(min, max){
return Math.floor(Math.random() * (max - min)) + min;}
const app = Vue.createApp({

data(){
    return{
        playerHealth:100,
        monsterHealth:100
    };

},
methods:{
    attackMonster(){
        console.log('attack called')
       const attackValue = getRandomValue(5,12);
       this.monsterHealth = this.monsterHealth - attackValue;
       this.attackPlayer()
    },

    attackPlayer(){
        console.log('attack Player called')
        const attackValue =  getRandomValue(8,15);
        this.playerHealth = this.playerHealth - attackValue;
     }
}
 });

I can see you've defined methods, but I can't see you calling any of them. Try doing something on the created() hook. — Someone
– Someone, Commented Nov 16, 2020 at 16:09

Mgs M Rizqi Fadhlurrahman · Accepted Answer · 2020-11-16 16:44:29Z

1

You need to mount your app to a <div> tag, for example:

In your html:

<div id="app"></div>

In app.js:

const vm = app.mount('#app')

Here is the detailed explanation from Vue.js documentation: https://v3.vuejs.org/guide/instance.html#creating-an-application-instance

answered Nov 16, 2020 at 16:44

Mgs M Rizqi Fadhlurrahman

4953 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kusiaga · Accepted Answer · 2020-11-17 02:06:29Z

0

You have defined methods attackMonster and attackPlayer but you didn't call them. You can use created() to call them or you can also use mounted() (if you need to access DOM).

  created () {
    this.attackMonster();
  }

Also you need to mount Vue app to HTML.

const app = Vue.createApp({
/** the rest of your vue app */
  
/** the rest of your vue app */

  created () {
    this.attackMonster();
  }
})

const vm = app.mount('#app');

html

  <body>
    <div id="app">
      <p>playerHealth: {{ playerHealth }}</p>
      <p>monsterHealth: {{ monsterHealth }}</p>
    </div>
  </body>

answered Nov 17, 2020 at 2:06

kusiaga

6951 gold badge7 silver badges21 bronze badges

Comments

laguf1.mobi · Accepted Answer · 2020-11-17 02:26:08Z

0

Please check the path in your script tag

<script src="/path/to/app.js" defer></script>

answered Nov 17, 2020 at 2:26

laguf1.mobi

1816 bronze badges

Collectives™ on Stack Overflow

Vue javascript application not calling app.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related