Question

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>

我主要关心的是当我单击添加学生时。它不会添加新行。我认为我不太确定是否缺少循环。我试图学习Vue.js，这基本上是该平台获得的最基本的知识。

Answer 1

您正在#mainTable元素上创建Vue实例，但是您的Add student按钮不在该容器内，因此您的单击将永远不会那样工作。将弹出窗口移动到创建实例的容器中。同样，将您的方法保留在实例中的一种好习惯。请查看下面的代码：

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 个答案: