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 — Vucko
– Vucko, Commented Nov 19, 2019 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
– Ayrton, Commented Nov 19, 2019 at 15:27

MJ_Wales · Accepted Answer · 2019-11-19 15:33:05Z

2

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

answered Nov 19, 2019 at 15:33

MJ_Wales

9052 gold badges8 silver badges22 bronze badges

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

Comments

pavan kumar · Accepted Answer · 2019-11-19 15:34:17Z

1

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

answered Nov 19, 2019 at 15:34

pavan kumar

8236 silver badges15 bronze badges

Collectives™ on Stack Overflow

edit state in vue js inside v-for

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related