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

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

编辑是一个 bool 值。

当我单击“编辑”时，它应该只打开当前评论的文本区域。并非所有评论:\

我真的无法弄清楚这一点。非常感谢任何帮助。

Answer 1

这是因为所有组件都使用 editing bool 值，因此当将其设置为 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
   },