如何将一个输入与另一个相关联（改变一个也改变另一个）

Question

我通过<script>使用vue 2.x。

我有一个包含用户列表的页面，它们显示在表格中，用户可以对其进行编辑：

name                  description1              description2
1st name input        1st description1 input    1st description2 input
2nd name input        2nd description1 input    2nd description2 input
....

对于description1和description2，它们可能包含很长的内容，但输入只显示一行（我不能在这里使用textarea）。

因此，我需要这样做：

如果用户点击description1输入，会出现一个大的弹出对话框，用户可以看到完整的内容并在弹出窗口中编辑，编辑后，如果用户点击弹出窗口的save按钮，那么新内容将转入description1输入哪个用户点击；

如果用户点击description2输入，会出现一个很大的弹出对话框，用户可以看到完整的内容并在弹出窗口中编辑，编辑后，如果用户点击弹出窗口的save按钮，则新内容将转入description2输入用户点击的；

等等。

我有一个main.jsp，其中包括student.html 和student.html，如下所示：

<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 是弹出对话框（引导模式）。

那么如何在 Vue 中实现我的目标？如何同步弹出对话框值和列表学生的输入值？

Answer 1

您可以保存选中的学生+要更改的学生的属性，点击保存按钮即可应用更改：

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>