How to associate one input to another(change one also change another) - vue.js

Question

I am using vue 2.x via <script>.
I have a page contains a list of users, they are shown in a table and users can edit it:
name description1 description2
1st name input 1st description1 input 1st description2 input
2nd name input 2nd description1 input 2nd description2 input
....
For description1 and description2, they may contain a long content, but the input only show one line(I cannot use textarea here).
Therefore, I need to do:
If user click description1 input, there is a big popup dialog shown such that user can see the complete content and edit it in popup, after editing, if user click save button of popup, then the new content will be transferred to description1 input which user click;
If user click description2 input, there is a big popup dialog shown such that user can see the complete content and edit it in popup, after editing, if user click save button of popup, then the new content will be transferred to description2 input which user click;
and so on.
I have a main.jsp which includes student.html and the student.html as follows:
<div id="studentDiv">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description1</th>
<th>Description2</th>
</tr>
</thead>
<tbody>
<tr v-for="s in studentList" :key="index">
<td><input v-model="s.name" /></td>
<td><input v-model="s.description1" /></td>
<td><input v-model="s.description2" /></td>
</tr>
</tbody>
</table>
<div class="modal fade" id="popupDialog" role="dialog"
aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl modal-dialog- scrollable" role="document">
<div class="modal-body">
<textarea v-model="popupTextArea"></textarea>
</div>
</div>
</div>
<script>
studentVM = new Vue({
name:'student',
el: '#studentDiv',
data() {
return {
studentList:[],
popupTextArea: ''
}
},
......
})
</script>
</div>
popupDialog div is the popup dialog(bootstrap modal).
So how can I achieve my goal in Vue? How can I sync popup dialog value and input value of list student?

Answer 1

You can save the selected student + the property of the student you want to change, and apply the change when you click the save button:
data() {
return {
studentList:[],
popupTextArea: ''
selectedStudent: null,
selectedStudentProperty: '',
}
},
methods: {
selectStudent(student, property) {
this.selectedStudent = student;
this.selectedStudentProperty= property;
}
onPopupSave() {
this.selectedStudent[this.selectedStudentProperty] = this.popupTextArea;
// if the line above is not working reactively try using vue.set():
// this.$set(this.selectedStudent, this.selectedStudentProperty, this.popupTextArea)
}
}
<tr v-for="s in studentList" :key="index">
<td><input v-model="s.name" /></td>
<td><input v-model="s.description1" #click="selectStudent(s, 'description1')"/></td>
<td><input v-model="s.description2" #click="selectStudent(s, 'description2')"/></td>
</tr>