<div id="app">
<div v-if="error" class="error-message">
{{ error }}
</div>
<!-- Other HTML content -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
error: ''
},
mounted() {
// Assuming there is an API call or any asynchronous operation in this mounted hook
// which results in an error
this.fetchData()
.then(() => {
// Success
})
.catch(error => {
// Error occurred
this.error = error.message;
});
},
methods: {
fetchData() {
// Simulating an asynchronous operation using Promise
return new Promise((resolve, reject) => {
setTimeout(() => {
// Simulating an error
reject(new Error('Something went wrong!'));
}, 2000);
});
}
}
});
</script>
The error message “vue warn: unhandled error during execution of mounted hook” typically occurs when an error is not handled properly within the mounted hook of a Vue.js component.
To explain the code above in detail:
– The HTML content is enclosed within a `div` element with an id of “app”. This id is used to mount the Vue instance.
– There is a `div` element with a `v-if` directive that is conditionally displayed if there is an error. The error message is displayed using the `{{ error }}` syntax.
– The Vue.js library is imported using a script tag with the CDN (Content Delivery Network) link.
– The Vue instance is created and mounted to the “app” div.
– Within the Vue instance, there is a `data` property that initializes the `error` variable as an empty string.
– The `mounted` hook is executed after the Vue instance is mounted to the DOM.
– Inside the `mounted` hook, there is a simulated asynchronous operation called `fetchData()` which returns a Promise.
– In the `fetchData` method, a `setTimeout` is used to simulate an asynchronous operation that throws an error using `reject(new Error(‘Something went wrong!’))`.
– The error is caught using the `catch` method and the error message is assigned to the `error` variable.
– If an error occurs, the `div` element with the `error-message` class will be displayed with the error message.
This example illustrates how to handle and display an error within the mounted hook of a Vue component. Feel free to adjust this code to fit your specific use case.