How can I fetch data in Vue.js?

How can I fetch data in Vue.js?

You can use the fetch API or libraries like Axios to retrieve data in Vue.js. Would you like an example?

Yes, please provide an example using Axios.

Sure! First, install Axios with npm install axios. Then, in your component, you can do something like this:

import axios from 'axios';

export default {
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
};

What if I want to handle loading states?

You can add a loading state in your data object and set it to true before the request and false after it completes. Here's how:

data() {
  return {
    info: null,
    loading: true
  };
},
mounted() {
  axios.get('https://api.example.com/data')
    .then(response => {
      this.info = response.data;
    })
    .finally(() => {
      this.loading = false;
    });
}