Getting Parsing error: Unexpected token, expected "," in Vue

Question

I am trying to do an axios request but whatever I do I get the same error message.

The message is:

Parsing error: Unexpected token, expected ",". The error points at axios.get (it points at the dot between "axios" and "get" in the error message). It gives the same message if I put something like console.log in the code.

I am basically just using a regular default vue project and the only thing I have done is to add the following code in HelloWorld.vue.

<script type="text/javascript">
   import axios from 'axios';
 //  const axios = require('axios');

  export default {
    name: 'HelloWorld',  //  console.log("hi"),
    props: {
      msg: String //response
    },
    methods: {
      axios.get('https://swapi.co/api/people/1')
        .then(function(response){
            console.log(response)
        })
    }
  }

</script>

Can someone please tell me why this error keeps coming up, I am guessing this is pretty simple but I am losing my mind at this point. Thank you

The first method in methods object lacks the keyname and function operator. I.e. you've written the body of the method directly inside the object. — Teemu
– Teemu, Commented Feb 18, 2020 at 19:34

Adam Specker · Accepted Answer · 2020-02-18 21:00:34Z

1

You won't be able to access your axios method, since it isn't actually being declared as a function. You can write vue methods in two ways, both equivalent (to my knowledge).

export default {
  data() {
    item: []
  },
  methods: {
    getStarWarsCharacters() {
      // axios call goes here
    }
  }
}

Other way is like this:

export default {
  data() {
    item: []
  },
  methods: {
    getStarWarsCharacters: () => {
      // axios call goes here
    }
  }
}

I suspect that if you write it in the first way, Vue is actually converting to the second.

answered Feb 18, 2020 at 21:00

Adam Specker

4223 silver badges15 bronze badges

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

Comments

Fardin Ahsan · Accepted Answer · 2020-02-18 20:21:10Z

0

axios must be globalized in your root file.

    const axios = require('axios');
global.axios = axios;

answered Feb 18, 2020 at 20:21

Fardin Ahsan

913 bronze badges

Collectives™ on Stack Overflow

Getting Parsing error: Unexpected token, expected "," in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related