<template>
<div>
<button @click="getData">Get Data</button>
<p>{{ responseData }}</p>
</div>
</template>
<script>
export default {
data() {
return {
responseData: null
};
},
methods: {
getData() {
// Step 1: Make an API request (assuming using axios for simplicity)
axios.get('https://api.example.com/data')
.then(response => {
// Step 2: Update the responseData with the received data
this.responseData = response.data;
})
.catch(error => {
// Handle any errors that occurred during the API request
console.error('Error fetching data:', error);
});
}
}
};
</script>