Using vue.js, I am attempting to fetch data from a rest api but encountering issues. Unfortunately, the response data is not being displayed and no error status is shown either. It's puzzling trying to identify what may have gone wrong.
Below is my index.html
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
{{ message }}
</div>
<script>
var url = "http://clients.itsd.com.bd/table-cartel/wp-json/wp/v2/categories";
var app = new Vue({
el: "#app",
data: {
message: "Hello!"
},
methods: {
work: function(){
alert(url);
this.$http.get(url).then(function(response){
alert(response.data);
this.message = response.data;
}, function(error){
alert(error.statusText);
});
}
},
mounted: function(){
this.work();
}
});
</script>
</body>
</html>
The code displays the url, however, fails to show the response.data or error.statusText.
I referenced steps provided here.