Javascript 如何根据布尔对象属性生成v-if？

我有一个对象数组（来自类似facebook评论或任何其他社交网络的帖子的评论），我用v-for进行迭代，然后在每个评论上都有一个带有“编辑”和“删除”按钮的下拉按钮，我希望当我按下编辑按钮时，评论会变成一个输入，以便我可以编辑它，因此，我为每个注释对象添加了一个属性

click_to_edit

initialize in false，因此当我单击edit时，它会更改v-for相关的条件。但它并没有改变它，我想这是因为属性在一个对象中，它总是返回false，因此条件永远不会改变，但我不知道还有什么其他方法可以做到这一点。这是v-for的html：

          <div
            class="mb-2"
            v-bind:class="'comment_'+post.id"
            v-for="(comment, index) in comments"
            :key="index"
            v-if="comment.id_post === post.id"
          >
            <div class="row">
              <div class="col-img-user-post text-center">
                <img
                  class="rounded-circle img-icon-profile"
                  :src="routes.user_files+'/'+comment.code+'/'+comment.picture"
                  alt
                />
              </div>
              <div class="col">
                <div class="row">
                  <div class="col">
                    <div class="card-comment">
                      <div class="row">
                        <div v-if="!comment.clicked_to_edit" class="col">
                          <p class="mt-2 mb-2">{{ comment.description }}</p>
                          <p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
                        </div>

                        <div v-if="comment.clicked_to_edit" class="col">
                          <input v-model="comment.description" type="text" />
                          <p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
                        </div>

                        <div class="col-1">
                          <div class="row dropdown">
                            <div class="col">
                              <a
                                class="font-smaller"
                                type="button"
                                :id="'dropdownMenuButtonComment_'+index"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                <i class="fas fa-lg fa-angle-down grey-color"></i>
                              </a>
                              <div
                                class="dropdown-menu dropdown-menu-right"
                                :aria-labelledby="'dropdownMenuButtonComment_'+index"
                              >
                                <button
                                  class="dropdown-item"
                                  v-if="comment.id_user===profile_info.id_user"
                                  @click="editComment(comment.id, index)"
                                >
                                  <i class="far fa-edit"></i>
                                  Edit
                                </button>
                                <button
                                  class="dropdown-item"
                                  data-toggle="modal"
                                  data-target="#modalDeleteComment"
                                  v-if="comment.id_user===profile_info.id_user"
                                  @click="actionComment(comment.id, 2, index)"
                                >
                                  <i class="far fa-trash-alt red-color"></i>
                                  <span class="red-color">Delete</span>
                                </button>
                                <button
                                  class="dropdown-item"
                                  v-if="comment.id_user!==profile_info.id_user"
                                  @click="actionComment(comment.id, 3)"
                                >
                                  <i class="far fa-flag"></i>
                                  Report
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

和编辑功能：

  editComment(id, index) {
      this.comments[index].clicked_to_edit = true;
      console.log(this.comments[index]);
    },

---

我故意忽略了你的模型，以展示一个一般情况。如果您需要帮助将其应用到您的案例中，请告诉我

Vue.config.productionTip=false；
Vue.config.devtools=false；
新Vue({
el:“#应用程序”，
数据：（）=>({
评论：[
{id:'one'，描述：“test 1”}，
{id:'two'，description:'test2'}，
{id:'three'，description:'test3'}
].map（i=>（{…i，
i编辑：错误
}))
}),
方法：{
异步切换编辑（注释、索引）{
常量isopending=！comment.isEditing；
这是我的意见
.filter（c=>c.isEditing）
.forEach（c=>c.isEditing=false）；
if（等间距）{
comment.isEditing=true；
等待此消息。$nextTick（）；
这是。$refs.comments[index].querySelector（'input'）.focus（）
}
},
blur:ev=>ev.target.blur（）
}
})

。注释{
最小高度：21px；
}

如果您有推荐id，为什么要使用索引？它给了我一个尝试的方法，我明天会这样做，非常感谢您抽出时间！不客气。我对它做了一些小修改，因为我发现在按enter键退出时切换运行了两次。现在它工作正常了。此行：`` this.$refs.comments[index].querySelector（“input”）.focus（）；```抛出此错误：“TypeError:无法读取未定义的”任何提示的属性“0”？是否在v-for元素上使用

ref=“comments”

？您是否在函数前面加了

async

？显然，你可以完全放弃它，但我认为如果你在启用编辑后集中输入会更好，对吗？恐怕我没法帮上忙了。我做了些小修改就把它整理好了。谢谢

  editComment(id, index) {
      this.comments[index].clicked_to_edit = true;
      console.log(this.comments[index]);
    },