Javascript 将表格从“更改为”；只读“；修补

我试图使用一个表来显示现有数据，或者在切换时修补现有条目的数据

使用vueJS双向绑定，此切换在前端工作正常-但是-我无法找到一种方法来

修补

编辑的数据

这是桌子：

<table id="userData">
    <tr>
        <th>Name</th>
        <th>Email Address</th>
        <th>Mobile Number</th>
        <th>Action</th>
    </tr>
<tr v-for="(rowUser, k) in userData" :key="k" :class="{ highlighted: rowUser.isHighlight }"> <!-- VUEjs for-loop zur Tabellenerweiterung -->
   
     <td class="name" @click="toggleHighlight(rowUser)">
        <input :readonly="rowUser.readOnly" class="tableDisplay" :class="{ tableInput: !rowUser.readOnly}" type="text" v-model="rowUser.name" />
    </td>
     <td @click="toggleHighlight(rowUser)">
        <input :readonly="rowUser.readOnly" class="tableDisplay" :class="{ tableInput: !rowUser.readOnly}" type="email" v-model="rowUser.email" />
    </td>
     <td @click="toggleHighlight(rowUser)">
        <input :readonly="rowUser.readOnly" class="tableDisplay" :class="{ tableInput: !rowUser.readOnly}" type="number" v-model="rowUser.number" />
    </td>
     <td @click.self="toggleHighlight(rowUser)">
        
        <button type='button' class="buttonEdit" :class="{buttonSave: !rowUser.readOnly}" @click="editData(rowUser)">
            <div v-if="rowUser.readOnly">Update</div><div v-else>Save</div>
        </button>
        
    </td>
</tr>
</table>

如您所见，该按钮将

输入

-字段切换为

只读

或可编辑

---

单击保存按钮后，是否有方法修补编辑的数据？

感谢所有能够提供帮助的人：）

editData(rowUser){
            rowUser.readOnly = !rowUser.readOnly
        },