edit state in vue js inside v-for

Question

I'm fetching comments from api. and I'm trying to edit a comment from the list.

When i click edit i show a text area inside the comment box and a button to save the comment . which is working nicely.

The problem is when i click edit the edit textarea gets applied to all comment boxes :|

         <div>
                    <i class="fas fa-pen text-action text-success mr-3" @click="showComment(comment.id)" v-if="user == comment.user_id" v-b-tooltip.hover title="edit"></i>
                    <i class="fas fa-times-circle text-danger" v-b-tooltip.hover title="delete" v-if="!editing" v-show="user == comment.user_id"></i>
                    <i class="fa fa-times text-action text-danger mr-3" v-if="editing" @click="editing = false" v-b-tooltip.hover title="cancel editing"></i>
                </div>
            </div>
            <div v-if="editing">
                <textarea class="form-control" v-model="commentEdited" :id="comment.id" :placeholder="comment.body"></textarea>
                <button class="btn btn-xs btn-success" @click="editComment(comment)">save</button>
            </div>

The show comment method :

showComment(comment_id) {
    console.log("clicked" + comment_id);
    for (let i = 0; i < this.comments.length; i++) {
        if (this.comments[i].id == comment_id) {
            this.comment.body = this.comments[i].body;
            this.comment.id = this.comments[i].id;
            this.editing = true;
        }
    }
},

the editing is a boolen.

when i click edit it should only open the textarea for the current comment only . not all the comments :\

I really cant figure this out .Any help is appreciated .

Possible duplicate of [Vue change object in array and trigger reactivity](https://stackoverflow.com/questions/46985067/vue-change-object-in-array-and-trigger-reactivity) — Vucko, Nov 19 '19 at 15:27
If your `editing` property is global then it will be the same for every element you're iterating on. If you want each element to have its own `editing` state then you should add that property to each element or use a nested component — Ayrton, Nov 19 '19 at 15:27

score 2 · Accepted Answer · answered Nov 19 '19 at 15:33

Its because editing boolean is used by all of the components so when setting it to true, all comments show. You could change editing to a string property that is equal to the id of the comment being edited:

        <div>
                <i class="fas fa-pen text-action text-success mr-3" @click="showComment(comment.id)" v-if="user == comment.user_id" v-b-tooltip.hover title="edit"></i>
                <i class="fas fa-times-circle text-danger" v-b-tooltip.hover title="delete" v-if="!editing" v-show="user == comment.user_id"></i>
                <i class="fa fa-times text-action text-danger mr-3" v-if="editing" @click="editing = ''" v-b-tooltip.hover title="cancel editing"></i>
        </div>

        <div v-if="editing == comment.id">
        </div>

   showComment(id) {
       this.editing = id
   },

score 1 · Answer 2 · answered Nov 19 '19 at 15:34

the reason is you are having editing as a common variable, i suggest you instead to carry a variable that holds the 'id'of your clicked comment, so if you have something like

 <div v-if="commentId===comment.id">
                <textarea class="form-control" v-model="commentEdited" :id="comment.id" :placeholder="comment.body"></textarea>
                <button class="btn btn-xs btn-success" @click="editComment(comment)">save</button>
            </div>

where commentId is the variable into which you store the selected comment.id after that make it '' empty...

this would be my approach

edit state in vue js inside v-for

2 Answers2