new Vue({
el: '#app',
data: {
formObj: {
name: null,
position: null,
company: null
},
usersList: [],
isShowDetails: false,
modalContent: null
},
methods: {
createList() {
const obj = structuredClone(this.formObj);
this.usersList.push(obj);
},
showDetails(id) {
this.isShowDetails = true;
this.modalContent = this.usersList.find((obj, index) => index === id);
},
closeModal() {
this.isShowDetails = false;
}
}
})
/* Modal (Background) */
.modal {
display: block; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black with opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Name:</label><br/>
<input type="text" id="name" name="name" v-model="formObj.name"/><br/><br/>
<label>Position:</label><br/>
<input type="text" id="position" name="position" v-model="formObj.position"/><br/><br/>
<label>Company:</label><br />
<input type="text" id="company" name="company" v-model="formObj.company"/><br/><br/>
<button @click="createList()">Submit</button>
<ul>
<li v-for="(user, index) in usersList" :key="index">
{{ user.name }}
<button @click="showDetails(index)">Show Details</button>
</li>
</ul>
<!-- Modal -->
<div id="myModal" class="modal" v-if="isShowDetails">
<!-- Modal content -->
<div class="modal-content">
<span class="close" @click="closeModal">×</span>
<p>Name: <span id="modalText1">{{ modalContent.name }}</span></p>
<p>Position: <span id="modalText2">{{ modalContent.position }}</span></p>
<p>Company: <span id="modalText3">{{ modalContent.company }}</span></p>
</div>
</div>
</div>