Как я могу сделать v-если в зависимости от логического свойства объекта?

Question

У меня есть массив объектов (комментарии из постов, таких как комментарии в Facebook или любой другой социальной сети), и я повторяю его с помощью v-for, затем у меня на каждом комментарии есть выпадающая кнопка с надписью «редактировать» и «удалять» Кнопки, я хотел бы, чтобы при нажатии кнопки редактирования комментарий изменился на ввод, чтобы я мог его редактировать, поэтому я добавил свойство click_to_edit initialize в false для каждого объекта комментария, поэтому, когда я нажимаю на редактировать, он изменяет условие, к которому относится v-for. Но это не меняет его, я предполагаю, что, поскольку свойство находится внутри объекта, оно всегда возвращает false, и поэтому условие никогда не изменяется, но я не знаю, как еще это сделать. Это html для v-for:

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