thanks
Hey, thanks for this tutorial series about vue and php/mysql, i am trying to learn vue and with these posts I understood how it works a little.
Thank you from Argentina
<!-- Edit Modal --> <div class="myModal" v-if="showEditModal"> <div class="modalContainer"> <div class="editHeader"> </div> <div class="modalBody"> <div class="form-group"> <input type="text" class="form-control" v-model="clickMember.firstname"> </div> <div class="form-group"> <input type="text" class="form-control" v-model="clickMember.lastname"> </div> </div> <hr> <div class="modalFooter"> <div class="footerBtn pull-right"> </div> </div> </div> </div> <!-- Delete Modal --> <div class="myModal" v-if="showDeleteModal"> <div class="modalContainer"> <div class="deleteHeader"> </div> <div class="modalBody"> </div> <hr> <div class="modalFooter"> <div class="footerBtn pull-right"> </div> </div> </div> </div>
.editHeader{ padding:10px; background: #4CAF50; color: #FFFFFF; height:50px; font-size:20px; padding-left:15px; } .deleteHeader{ padding:10px; background: #f44336; color: #FFFFFF; height:50px; font-size:20px; padding-left:15px; } .closeEditBtn{ background: #4CAF50; color: #FFFFFF; border:none; } .closeDelBtn{ background: #f44336; color: #FFFFFF; border:none; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div id="members"> <div class="col-md-8 col-md-offset-2"> <div class="row"> <div class="col-md-12"> <h2>Member List </h2> </div> </div> <div class="alert alert-danger text-center" v-if="errorMessage"> </div> <div class="alert alert-success text-center" v-if="successMessage"> </div> <table class="table table-bordered table-striped"> <thead> </thead> <tbody> <tr v-for="member in members"> <td> </td> </tr> </tbody> </table> </div> <?php include('modal.php'); ?> </div> </div> </body> </html>
if($crud == 'update'){ $memid = $_POST['memid']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $sql = "update members set firstname='$firstname', lastname='$lastname' where memid='$memid'"; $query = $conn->query($sql); if($query){ $out['message'] = "Member Updated Successfully"; } else{ $out['error'] = true; $out['message'] = "Could not update Member"; } } if($crud == 'delete'){ $memid = $_POST['memid']; $sql = "delete from members where memid='$memid'"; $query = $conn->query($sql); if($query){ $out['message'] = "Member Deleted Successfully"; } else{ $out['error'] = true; $out['message'] = "Could not delete Member"; } }
var app = new Vue({ el: '#members', data:{ showAddModal: false, showEditModal: false, showDeleteModal: false, errorMessage: "", successMessage: "", members: [], newMember: {firstname: '', lastname: ''}, clickMember: {} }, mounted: function(){ this.getAllMembers(); }, methods:{ getAllMembers: function(){ axios.get('api.php') .then(function(response){ //console.log(response); if(response.data.error){ app.errorMessage = response.data.message; } else{ app.members = response.data.members; } }); }, saveMember: function(){ //console.log(app.newMember); var memForm = app.toFormData(app.newMember); axios.post('api.php?crud=create', memForm) .then(function(response){ //console.log(response); app.newMember = {firstname: '', lastname:''}; if(response.data.error){ app.errorMessage = response.data.message; } else{ app.successMessage = response.data.message app.getAllMembers(); } }); }, updateMember(){ var memForm = app.toFormData(app.clickMember); axios.post('api.php?crud=update', memForm) .then(function(response){ //console.log(response); app.clickMember = {}; if(response.data.error){ app.errorMessage = response.data.message; } else{ app.successMessage = response.data.message app.getAllMembers(); } }); }, deleteMember(){ var memForm = app.toFormData(app.clickMember); axios.post('api.php?crud=delete', memForm) .then(function(response){ //console.log(response); app.clickMember = {}; if(response.data.error){ app.errorMessage = response.data.message; } else{ app.successMessage = response.data.message app.getAllMembers(); } }); }, selectMember(member){ app.clickMember = member; }, toFormData: function(obj){ var form_data = new FormData(); for(var key in obj){ form_data.append(key, obj[key]); } return form_data; }, clearMessage: function(){ app.errorMessage = ''; app.successMessage = ''; } } });