如何根據布爾對象屬性創建 v-if？

Question

我有一系列對象（來自帖子的評論，如 facebook 評論或任何其他社交網絡），我用 v-for 對其進行迭代，然后我在每個評論上都有一個帶有“編輯”和“刪除”按鈕的下拉按鈕，我我希望當我按下編輯按鈕時，評論會更改為輸入，以便我可以對其進行編輯，因此我向每個評論對象添加了一個屬性click_to_edit initialize 為 false，因此當我單擊編輯時，它會更改 v-因為是相關的。 但它並沒有改變它，我想是因為該屬性在一個對象內，它總是返回 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>