How can I use Vue.js to fetch and bind data from an API?

How can I use Vue.js to fetch and bind data from an API?

You can use the fetch API or libraries like Axios to retrieve data. Then, bind it to your Vue components using data properties.

Can you show me a simple example of this?

Sure! Here's a basic example:

new Vue({
  el: '#app',
  data: {
    info: null
  },
  mounted() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.info = data;
      });
  }
});

This fetches data when the component is mounted and binds it to the info property.

What if I want to handle errors during the fetch?

You can add a .catch() method to handle errors. Here's an updated example:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    this.info = data;
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });