通过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. enter code here这是一个简单的SPA（单页应用程序），您可以在其中将数据添加到模式中，然后它将自动将数据从模式中添加到主页中的表中。

 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. 我试图学习Vue.js，这基本上是该平台获得的最基本的知识。

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. 您正在#mainTable元素上创建Vue实例，但是“ Add student按钮在该容器之外，因此您的单击将永远不会那样工作。 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>

通过vue.js将模式形式的数据添加到表中

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-12 14:41:54

通过vue.js将模式形式的数据添加到表中

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-12 14:41:54

解决方案1
0 已采纳 2018-07-12 14:41:54