I am experimenting with using AJAX in conjunction with Vue.js 2:
let remoteUrl = '...................';
var app = new Vue({
el: '#app',
data: {
items: []
},
created: function () {
this.getFilms();
},
methods: {
getFilms: function () {
$.ajax({
type: "GET",
url: remoteUrl
}).done(function (res) {
console.log(res);
self.items = res;
}).fail(function (err) {
alert("ERROR: " + err);
});
}
}
this is the html:
<table>
<tbody>
<tr v-for="item in items">
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.size}}</td>
<td>{{item.extension}}</td>
</tr>
</tbody>
</table>
</div>
An output is visible in the console, however, the table remains empty. No errors are observed in the AJAX call. I have attempted both the created and mounted approaches. Why is the table not populating?