Vue JS 表单输入动态数据与model绑定 评论编辑功能实现相关问题

首先明确：不能同时使用v-model和:value绑定同一个输入框的值，v-model本身就是:value+@input的语法糖，二者同时声明会产生冲突，Vue会默认忽略你写的:value绑定，只生效v-model的逻辑。

回到你的需求本身，两种方案可以选：

• 如果你不需要支持「编辑中途取消恢复原内容」的能力，你现在的写法完全可用。v-model直接绑定comment.message本身就已经实现了「展示当前评论原有值 + 同步输入内容到对象」的需求，提交的时候直接取对应comment的message字段发PATCH请求即可。
• 如果需要支持取消编辑、或者提交时的字段名和原评论存储的字段名不一致，可以用临时编辑态变量做中转，避免直接修改原数组数据：
  1. 点击编辑时把当前评论的id和原有内容存到临时变量

  // data 中提前声明
  editForm: {
    commentId: null,
    remark: '' // 这里可以用你提交时需要的字段名
  }
  // 点击编辑的触发方法
  startEdit(comment) {
    this.editing = true
    this.editForm.commentId = comment._id
    this.editForm.remark = comment.message
  }
  

  2. 表单绑定临时变量

  <p @click="startEdit(comment)">
    Edit comment
  </p>
  <form v-if="editing" @submit.prevent="editComment">
    <input type="text" v-model="editForm.remark"/>
    <button type="submit">提交修改</button>
    <button type="button" @click="editing = false">取消</button>
  </form>
  

  3. 提交时直接拿editForm的字段发请求即可，请求成功后再手动更新原评论数组中对应项的内容，避免编辑中途取消污染原数据。

内容的提问来源于stack exchange，提问作者Oskar Mikael