将表单从“只读”更改为 PATCH

如何解决将表单从“只读”更改为 PATCH

我正在尝试使用单个表来显示现有数据或 -on toggle- PATCH 现有条目的数据。

使用 vueJS 2-way-binding，这个切换在前端工作正常 - 但是 - 我无法理解PATCH编辑数据的方法。

这是表：

<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() 函数，它被触发 @click：

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

如您所见，该按钮将 Input-Field 切换为 readOnly 或可编辑。

---

有没有办法在点击保存按钮后PATCH编辑数据？

感谢所有可以提供帮助的人:)