如何根据布尔对象 属性 创建 v-if？

Question

我有一组对象（来自类似 facebook 评论或任何其他社交网络的帖子的评论），我用 v-for 对其进行迭代，然后我在每个评论上都有一个带有 "edit" 的下拉按钮和 "delete" 按钮，我希望当我按下编辑按钮时，评论会变成一个输入，这样我就可以编辑它，所以我添加了一个 属性 click_to_edit initialize in false to each评论对象，所以当我点击编辑时，它改变了与 v-for 相关的条件。但它并没有改变它，我想这是因为 属性 在一个对象内部它总是 return 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>

数据中陈述的对象注释：

      comment: {
        id: "",
        id_post: "",
        description: "",
        clicked_to_edit: false,
        id_user: this.profile_info.id_user,
        code: this.profile_info.code,
        name: this.profile_info.name,
        surname_1: this.profile_info.surname_1,
        surname_2: this.profile_info.surname_2,
        nick: this.profile_info.nick,
        picture: this.profile_info.picture,
        role: this.profile_info.id_role,
        time_ago: "0 minutes"
      },

和编辑功能：

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

Answer 1

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

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    comments: [
      { id: 'one', description: "test 1" },
      { id: 'two', description: "test 2" },
      { id: 'three', description: "test 3" }
    ].map(i => ({ ...i,
      isEditing: false
    }))
  }),
  methods: {
    async toggleEditing(comment, index) {
      const isOpening = !comment.isEditing;
      this.comments
        .filter(c => c.isEditing)
        .forEach(c => c.isEditing = false);

      if (isOpening) {
        comment.isEditing = true;
        await this.$nextTick();
        this.$refs.comments[index].querySelector('input').focus()
      }
    },
    blur: ev => ev.target.blur()
  }
})

.comment {
  min-height: 21px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(comment, i) in comments" ref="comments" :key="comment.id">
    <div v-if="!comment.isEditing"
         v-text="comment.description"
         class="comment"
         @click="toggleEditing(comment, i)"></div>
    <div v-else>
      <input v-model="comment.description"
             @blur="toggleEditing(comment)"
             @keyup.enter="blur"
             />
    </div>
  </div>
</div>