Using a shortcode, I have integrated Vue.js into 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(){
console.log("Start Mounting...");
this.getAllListings();
console.log("End Mounting...");
},
methods: {
async getAllListings(){
this.listings = [];
axios.get('/scripts/prod/directory.php?action=read').then(response => {
this.listings = response.data.listings;
console.log(this.listings)
})
.catch(err => {
console.log(err);
});
}
}
});
});
A quick note: The "getAllListings()" function has been updated and is now functioning properly. You can see the code above for reference.
<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>
Thank you!