Having trouble catching an error in a Vue method called getTodo?
To see the issue, click on Set incorrect url and then on Get Todo. You will notice an error in the store as expected, but when the getTodo promise's then is executed in Vue, there's no error. However, if you select Set correct url, everything works fine.
The console logs should display:
Error on store
Error on vue
Check out the JavaScript and HTML code below:
const store = new Vuex.Store({
state: {
todo: '',
msg: '',
url: 'https://jsonplaceholder.typicode.com/todos/test',
correct: false
},
mutations: {
// mutation logic here
},
actions: {
// action logic here
}
})
new Vue({
el: '#app',
data: {
// data definition here
},
computed: {
// computed properties here
},
methods: {
// methods definition here
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ todo }}</p>
<p>Correct url: {{ correctUrl }}</p>
<button @click="getTodo">Get Todo</button>
<button @click="setCorrect">Set correct url</button>
<button @click="setIncorrect">Set incorrect url</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="225457475a62110c0e100b">[email protected]</a>/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>