Adding data from modal form to the table via vue.js

Question

enter code here It's a simple SPA (single page application) where you add data to a modal then it will automatically add the data from the modal to the table in the main page.

 var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById('modalBtn'); var close = document.getElementsByClassName('closeBtn')[0]; var add = document.getElementsByClassName('addBtn')[0]; modalBtn.addEventListener('click',displayModal); close.addEventListener('click',closeModal); add.addEventListener('click',addBtn); function displayModal(){ modal.style.display='block'; } function closeModal(){ modal.style.display='none'; } function addBtn(){ modal.style.display='none'; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Studen Records</title> <link rel="stylesheet" href="style.css"> <script src="vue.js"></script> </head> <body> <button id="modalBtn" class="button">+Add</button> <div class="main-content" id="mainTable"> <h3 class="mainHeader">Student Records</h3> <table class="sTable"> <tr> <th v-for="h in header">{{ h }}</th> </tr> <tr v-for="s in student"> <td>{{ s.idNum }}</td> <td>{{ s.sName }}</td> <td>{{ s.sCourse }}</td> </tr> </table> </div> <div id="modalAdd" class="modal"> <div class="modalForm"> <div class="modalHeader"> <span class="closeBtn">&times;</span> <h3 class="mainHeader">Add Student</h3> </div> <div> <form class="forms" action=""> ID Number: <br> <input type="text" v-model="idNum"><br> Student Name: <br> <input type="text" v-model="sName"><br> Course: <br> <input type="text" v-model="sCourse"><br> </form> </div> <div class="modalFooter"> <span class="addBtn" @click="addnew()">ADD STUDENT</span> </div> </div> </div> <script src="main.js"></script> <script> new Vue({ el:'#mainTable', data:{ header:['ID','NAME','COURSE'], student:[], idNum:'', sName:'', sCourse:'', }, methods:{ addnew(){ this.student.push({ 'idNum':this.idNum, 'sName':this.sName, 'sCourse':this.sCourse, }) } } })</script> </body> </html>

my main concern is when i click on add student. It will not add a new row. I think im missing a loop not really sure. Im trying to learn Vue.js and this is basically the most basic it gets for the platform.

Answer 1

You're creating your Vue instance on the #mainTable element but your Add student button is outside of that container so your click will never work like that. Move your popup inside the container you create the instance on. Also, is good practice to keep your methods inside the instance. Please check out the code below:

 new Vue({ el: '#mainTable', data: { header: ['ID', 'NAME', 'COURSE'], student: [], idNum: '', sName: '', sCourse: '', }, methods: { addnew() { this.student.push({ 'idNum': this.idNum, 'sName': this.sName, 'sCourse': this.sCourse, }) this.closeModal() }, displayModal() { document.getElementById('modalAdd').style.display = 'block'; }, closeModal() { document.getElementById('modalAdd').style.display = 'none'; } } })

 /* Modal */ .modalbutton { background: #2e6cd1; padding: 10px 10px; color: white; border: 0; margin: 5px 2px; } .button { float: right; background: #2e6cd1; padding: 1em 2em; color: white; border: 0; } .button:hover { background: #333; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: scroll; background-color: rgba(0, 0, 0, 0.5); animation-name: modalAni; animation-duration: 1s; } .modalForm { background: #f4f4f4; margin: 10% auto; width: 60%; } .modalHeader { width: 100%; background: coral; text-align: center; overflow: hidden; } .forms { width: 100%; overflow: hidden; padding: 0px 10px; } input[type=text] { width: 95%; padding: 12px 20px; margin: 8px 10px; box-sizing: border-box; } .closeBtn { background: #e94343; font-size: 30px; float: right; width: 15%; } .closeBtn:hover, .closeBtn:focus { color: #746c6c; cursor: pointer; } .modalFooter { background: green; width: 100%; text-align: center; overflow: hidden; height: 50px; } .addBtn { font-size: 30px; text-align: center; padding: 10px; } .addBtn:hover, .addBtn:focus, .modalFooter:hover { background: rgb(26, 172, 26); color: #ffffff; cursor: pointer; } /*main content*/ body { font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.6; } table, tr { width: 100%; border: 1px solid black; text-align: center; border-collapse: collapse; padding: 1px; background: #f4f4f4; } th { background: coral; } th, td { border: 1px solid black; padding: 1px; } .mainHeader { padding: 10px 5px 0px 0px; margin: 0; } @keyframes modalAni { from { opacity: 0 } to { opacity: 1 } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div class="main-content" id="mainTable"> <button id="modalBtn" class="button" @click="displayModal">+Add</button> <h3 class="mainHeader">Student Records</h3> <table class="sTable"> <tr> <th v-for="h in header">{{ h }}</th> </tr> <tr v-for="s in student"> <td>{{ s.idNum }}</td> <td>{{ s.sName }}</td> <td>{{ s.sCourse }}</td> </tr> </table> <div id="modalAdd" class="modal"> <div class="modalForm"> <div class="modalHeader"> <span class="closeBtn" @click="closeModal">&times;</span> <h3 class="mainHeader">Add Student</h3> </div> <div> <form class="forms" action=""> ID Number: <br> <input type="text" v-model="idNum"><br> Student Name: <br> <input type="text" v-model="sName"><br> Course: <br> <input type="text" v-model="sCourse"><br> </form> </div> <div class="modalFooter"> <span class="addBtn" @click="addnew">ADD STUDENT</span> </div> </div> </div> </div>

Adding data from modal form to the table via vue.js

Question

1 answers

solution1
0 ACCPTED 2018-07-12 14:41:54

Adding data from modal form to the table via vue.js

Question

1 answers

solution1 0 ACCPTED 2018-07-12 14:41:54

solution1
0 ACCPTED 2018-07-12 14:41:54