Vue JS Dynamic data and model in form input

Question

I'm trying to create a form where users edit their comments. The input should display the current value of the comment (which is dynamic data coming from a v-for), but I also need to bind the value to a model so that I may send it with my patch request.

Currently the form looks like this

<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>

Would there be any way to combine the v-model and :value binding? Or a way to bind the model value aswell and setting the name of the data?

Would there be any way to combine the v-model and :value binding? ...well v-model does bind value attribute — Michal Levý
– Michal Levý, Commented Sep 7, 2021 at 12:12

tho-masn · Accepted Answer · 2021-09-07 11:40:14Z

1

Assuming every comment is rendered within it's own comment, this would be an approach you can use (not tested):

Parent component:

<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>

Child component (Comment):

<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>

The benefit of storing the message bound to the input in it's own variable is, that you easily can cancel the action, by just resetting the updatedCommentMessage variable.

edited Sep 7, 2021 at 11:40

answered Sep 7, 2021 at 11:25

tho-masn

1,1841 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oskar Mikael Over a year ago

This returns error "TypeError: Cannot read properties of undefined (reading 'message')" when the updatedCommentMessage is set. However I don't see how the comment prop will be able to access the dynamic data

tho-masn Over a year ago

I've updated my post, so you better see what I mean. The parent component holds the actual comments, which gets passed down to the child component. If any update occurs, the parent component needs to get notified

Oskar Mikael Over a year ago

I see. This was not the structure I've been doing it in though. I have been having the Post and the Comments in the same component, but I guess splitting them up will be the best way to make this action work

tho-masn Over a year ago

I would suggest to do so. It's way easier to maintain. However, it should also work with having everything in the same component. It's just a bit trickier, because you need to track, which comment currently gets updated (and therefore you need take care of setting and resetting values)

Collectives™ on Stack Overflow

Vue JS Dynamic data and model in form input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related