[Vuejs]-Adding data from modal form to the table via vue.js

by

0👍

✅

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>
👤Ionut Necula

Leave a comment