VueJS:以列表和模态显示表单输入

Question

我正在尝试：

1. 将表单输入(姓名、职位、公司(显示为无序列表(v-for(，只列出输入的姓名和每个人的按钮
2. 如果单击按钮，将显示一个模态，其中显示为该人员输入的所有数据(姓名、公司、职位((**对象数组？(

代码沙盒：https://codesandbox.io/s/testing-2s8xvi?file=/src/components/EmployeeTable.vue

香草JS中的逻辑是什么样子的(以对象数组的形式访问数据，请注意使用.myParam为特定的人检索数组中的对象(：enter code herehttps://codepen.io/walrus2/pen/wvmoQOP

非常感谢您的帮助和建议，提前感谢

Answer 1

如果我理解正确，你想把普通的JS代码迁移到Vue代码中。如果是，开始：

注意：我没有在下面的演示中添加任何验证，请根据您的要求添加。

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;
}
}
})

/* The 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 w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The 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>
<!-- The Modal -->
<div id="myModal" class="modal" v-if="isShowDetails">
<!-- Modal content -->
<div class="modal-content">
<span class="close" @click="closeModal">&times;</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>