Vue JS 表单输入中的动态数据和模型

Question

我正在尝试创建一个表单，用户可以在其中编辑他们的 cmets。输入应该显示评论的当前值（这是来自 v-for 的动态数据），但我还需要将该值绑定到模型，以便我可以将它与我的补丁请求一起发送。

目前表单是这样的

<p @click="editing = true">
     Edit comment
</p>
<form v-if="editing" @submit.prevent="editComment(comment._id)">
   <input type="text" v-model="comment.message"/>
   <button type="submit">
     Edit Comment
   </button>
 </form>

有没有办法结合 v-model 和 :value 绑定？还是一种绑定模型值并设置数据名称的方法？

Answer 1

假设每条评论都在它自己的评论中呈现，这将是您可以使用的一种方法（未经测试）：

父组件：

<template>
  <div>
    <Comment 
      v-for="comment in comments"
      :key="comment._id"
      :comment="comment"
      @on-update="onUpdateComment"
    />
  </div>
</template>

<script>
  export default {
    data () {
      return {
        comments: [] // Could be also a computed property, or you populate the array somewhere in this component
      }
    },

    methods: {
      onUpdateComment({ commentId, value }) {
        // Perform update
      }
    }
  }
</script>

子组件（评论）：

<template>
  <div>
    {{ comment.message }}

    <p @click="onClickEdit">
        Edit comment
    </p>

    <form v-if="editing" @submit.prevent="editComment">
      <input type="text" :value="updatedCommentMessage"/>

      <button type="submit">
        Edit Comment
      </button>
    </form>
  </div>
</template>

<script>
  export default {
    props: {
      comment: {
        type: Object
      }
    },

    data () {
      return {
        editing: false,
        updatedCommentMessage: ''
      }
    }

    methods: {
      onClickEdit () {
        this.editing = true
        this.updatedCommentMessage = this.comment.message
      },

      editComment () {
        this.$emit('on-update', { commentId: this.comment.id, value: this.updatedCommentMessage})
      }
    }
  }
</script>

将绑定到输入的消息存储在它自己的变量中的好处是，您可以轻松地取消操作，只需重置updatedCommentMessage 变量。