CODEWITHSUNDEEP
javascriptvue.jsaxios
Babr
Babr

Reputation: 2081

Failed to compile vue.js app due to axios get request

I have this seemingly simple vue.js component which causes the app fail to compile:

<template>
<div>
  <div v-if="token"> 
    u R LOGED IN {{userid}}
  </div>
  <div v-else> 
    Token not found
  </div>


</div>

</template>

<script>
import axios from 'axios';

export default {
  name: 'AboutMe',

 created: {
    axios.get('http://127.0.0.1:3000/profile/aboutme/somejibberish'  )
    .then( res => { 
      console.log(res);

    })
    .catch( error => {  
      console.log(error);
    })
  }

}
</script>

The error that I get is: 

 ERROR  Failed to compile with 1 errors                                                                             

 error  in ./src/components/AboutMe.vue?vue&type=script&lang=js&

Syntax Error: SyntaxError: /home/me/vue-myapp/src/components/AboutMe.vue: Unexpected token, expected "," (122:9)

  120 | 
  121 |   created: {
> 122 |     axios.get('http://127.0.0.1:3000/profile/aboutme/fwefwefewf'  )
      |          ^
  123 |     .then( res => { 
  124 |       console.log(res);
  125 | 


 @ ./src/components/AboutMe.vue?vue&type=script&lang=js& 1:0-222 1:238-241 1:243-462 1:243-462
 @ ./src/components/AboutMe.vue
 @ ./src/routes.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.10:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have used axiom in other components in the same app without any issues so have no clue what could be wrong here? How can I fix it?

Upvotes: 2

Views: 658

Answers (2)

JD27
JD27

Reputation: 36

Syntax error change to:

created: function(){
    axios.get('http://127.0.0.1:3000/profile/aboutme/somejibberish'  )
    .then( res => { 
        console.log(res);

    })
    .catch( error => {  
        console.log(error);
    })
}

Source: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Or as seen in thefallens answer!

Upvotes: 0

thefallen
thefallen

Reputation: 9749

The created property needs to be a function, not an object:

import axios from 'axios';

export default {
  created() {
    axios.get(...
  }
}

Upvotes: 3

Related Questions