Question

我正在从api获取评论。我正在尝试从列表中编辑评论。

当我单击“编辑”时，我会在注释框中显示一个文本区域和一个用于保存注释的按钮。效果很好。

问题是当我单击“编辑”时，编辑文本区域将应用于所有评论框：|

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

显示评论方法：

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

editing是一个布尔值。

当我单击“编辑”时，仅应打开当前注释的文本区域。并非所有评论：\

我真的不知道这一点。感谢您的帮助。

Answer 1

这是因为所有组件都使用editing布尔值，因此将其设置为true时，将显示所有注释。您可以将编辑更改为与正在编辑的注释的id相等的字符串属性：

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

Answer 2

原因是您将编辑作为一个公共变量，我建议您改为携带一个包含您单击的注释的“ id”的变量，因此如果您有类似

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

其中commentId是将选定的comment.id存储在其中的变量，之后将其变为“空...

这是我的方法

在v-for内的vue js中编辑状态

2 个答案: