Encountering Parsing error: Anticipated token is missing, expecting "," within Vue framework

Question

Encountering Parsing error: Anticipated token is missing, expecting "," within Vue framework

I have been attempting to make an axios request, but no matter what I try, I keep encountering the same error message.

The specific error message reads:

Parsing error: Unexpected token, expected ","

. The error specifically points to axios.get (highlighting the period between "axios" and "get" in the error). This error persists even if I use something like console.log in the code.

I am simply working with a standard default vue project, and the only modification I have made is adding the following code into 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>

If someone could kindly explain why this error persists, I would greatly appreciate it. I assume it's something simple, but at this point, it's driving me crazy. Thank you.

javascript vue.js

Answer 1

Answer №1

If you try to access your axios method, you may encounter issues as it is not defined as a function. Vue methods can be written in two equivalent ways.

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

Alternatively, you can write it like this:

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

It seems that Vue automatically converts the first way of writing to the second way.

Answer 2

If you try to access your axios method, you may encounter issues as it is not defined as a function. Vue methods can be written in two equivalent ways.

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

Alternatively, you can write it like this:

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

It seems that Vue automatically converts the first way of writing to the second way.

Answer 3

Answer №2

To ensure axios is accessible throughout your project, it needs to be made global in your main file.

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

Answer 4

To ensure axios is accessible throughout your project, it needs to be made global in your main file.

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

Encountering Parsing error: Anticipated token is missing, expecting "," within Vue framework

Answer №1

Answer №2

Similar questions

Find the differences between the values in two arrays of objects and eliminate them from the first array

Running a function on a specific route within the same file in Node.js - here's how to do it

Fill the table according to the selected criteria

Customize the behavior of jQuery cycle with an <a> tag

I'm experiencing difficulties with the "AXIOS PATCH" functionality

Replicate the function of the back button following the submission of an ajax-submitted form to Preview Form

The function of AJAX is to send and receive data asynchronously without

Tips for securely integrating freelancers into your web project

Issue with Vuejs2.6: Images failing to load

"Setting a maximum height for a div element, along with nested divs and paragraphs

What distinguishes the act of altering attributes using React.createContext() in comparison to the value property?

The initial element within the div style is malfunctioning

Error in server file of NextJS due to Typescript issue

Is there a way to utilize Javascript to retrieve elements without specifying an id?

What is the reason that textContent assignment does not function properly when used with HTML tags?

Ways to retrieve the current URL in Next.js without relying on window.location.href or React Router

Is there a way to eliminate validation-on-blur errors triggered by onBlur events?

The Google Books API initially displays only 10 results. To ensure that all results are shown, we can implement iteration to increment the startIndex until all results have

Mastering AJAX with Django

Can you explain the concepts of 'theme' and 'classes'?