I am calling Vue.js using a shortcode on a WordPress page.
pl2010_vue_init_directory = pl2010_vue_init_directory || (function(ctx) {
new Vue(
{
el: '#'+ctx.el,
data: {
errorMsg: "",
successMsg: "",
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
listings: [],
newListing: {name: "",tel1: "",email1: ""},
currentListing: {}
},
mounted: function(){
var test = this.getAllListings();
console.log("Start Mounting...");
this.getAllListings();
console.log(this.getAllListings);
console.log(test);
console.log("End Mounting...");
},
methods: {
async getAllListings(){
console.log("Method 2");
axios.get('/scripts/prod/directory.php?action=read')
.then((response) => {
this.listings = response.data;
console.log(this.listings);
return this.listings;
})
}
}
});
});
NOTE: I have updated the "getAllListings()" function. I am now returned the correct number of rows but they are all blank. The "v-for" loop has something in it but I cannot output the values.
<tr class="text-center" v-for="listing in listings">
<td>{{ listing.id }}</td>
<td>{{ listing.name }}</td>
<td>{{ listing.tel1 }}</td>
<td>{{ listing.email1 }}</td>
<td><a href="#" class="text-success" @click="showEditModal=true"><i class="fas fa-edit"></i></a></td>
<td><a href="#" class="text-danger" @click="showDeleteModal=true"><i class="fas fa-trash-alt"></i></a></td>
</tr>
How can I output the values and not just the blank rows?
Thank you!
Try this