Vue js редактировать контент согласно его ID

Question

Я начинаю с vue js и перечисляю некоторые данные из базы данных. В частности, сообщения с заголовком, описанием и изображениями.

У меня есть кнопки «Изменить» и «Удалить». Все сообщения загружаются с использованием v-for. Поэтому, когда я нажимаю, чтобы отредактировать одно сообщение, все сообщения «открываются» для редактирования.

Мне нужно открыть редактирование только в одном сообщении за раз. Я имею в виду, конкретный пост c, который я действительно хочу отредактировать.

Я добился некоторого прогресса с заголовком input и значком удаления изображения, но все еще нужно работать с кнопками Сохранить и Отменить (они открываются во всех сообщений) и входных файлов (например, когда я выбираю файлы во втором сообщении, они загружаются в первое сообщение).

<div id="app" class="row mb-50">
   <div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
      <div class="tour-list">
         <div class="tour-list-title">
            <p>

               <!-- here I can block input title to be disabled on other posts not than the specific one and I intend to do the same with textarea -->

               <input class="inputEdit" type="text" ref="item.id" v-model="item.title"
                  :disabled="editingTour !== item.id" :class="{inputEditOpen: !editingTour}" />
            </p>
         </div>
         <div class="tour-list-description">
            <p>
               <textarea class="inputEdit" :disabled="!editingTour" v-model="item.description"
                  :class="{inputEditOpen: !editingTour}">
               {{ item.description }}
               </textarea>
            </p>
         </div>
         <div class="tour-list-pics">
            <div class="row mb-20">
               <div class="col-md-12">
                  <ul class="pics-list">
                     <li v-for="(image, index) in item.images">

                        <!-- here I could hide badge -->

                        <span :hidden="editingTour !== item.id" class="badge"
                           @click="$delete(item.images, index), deleteImage(image.imageID)">
                        <i class="fa fa-fw fa-times-circle"></i>
                        </span>
                        <div class="pics-list-image-container img-fluid cursor-pointer"
                           v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }"
                           @click="openModal = true, showModal(image.image)">
                        </div>
                     </li>
                     <li v-if="urls" v-for="(url, key) in urls" :key="key">
                        <div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"></div>
                     </li>
                     <li v-if="editingTour" class="add-pics-item">
                        <div :hidden="editingTour !== item.id" class="mt-10">
                           <label for="file-upload" class="custom-file-upload">
                           <img class="img-fluid" src="./img/plus-icon.png">
                           </label>
                           <input id="file-upload" type="file" @change="onFileChange"
                              name="files[]" multiple />
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="tour-list-options">
            <div class="row">
               <div class="col-md-6">
                  <span>
                  <button @click="editingTour = item.id" v-if="!editingTour"
                     class="btn border btn-circle tour-list-edit-btn">Edit</button>
                  </span>
                  <span>
                  <button  @click="editTour(item)" v-if="editingTour"
                     class="btn border btn-circle tour-list-edit-btn">Save</button>
                  </span>
                  <span>
                  <button @click="clearInput" v-if="editingTour"
                     class="btn border btn-circle tour-list-delete-btn">Cancel</button>
                  </span>
                  <span>
                  <button @click="deleteTour(item.id, index)" v-if="!editingTour"
                     class="btn border btn-circle tour-list-delete-btn">Delete</buton>
                  </span>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Обновление

Если я использую

<button  @click="editTour(item)" v-if="editingTour == item.id" class="btn border btn-circle tour-list-edit-btn">Save</button>

все остальные кнопки «Сохранить» скрываются.

Answer 1

Я думаю, вы можете использовать добавить к каждому объекту списка новое свойство isEditing и искать его в каждом элементе l oop, чтобы проверить Save / Edit show. Теперь ваша единственная опора editingTour не может использоваться для многократного редактирования, она не может хранить массив идентификаторов отредактированных элементов. Шаблон кнопок будет выглядеть так:

                  <span>
                  <button @click="item.isEditing = item.id" v-if="!item.isEditing"
                     class="btn border btn-circle tour-list-edit-btn">Edit</button>
                  </span>
                  <span>
                  <button  @click="editTour(item)" v-if="item.isEditing"
                     class="btn border btn-circle tour-list-edit-btn">Save</button>
                  </span>
                  <span>
                  <button @click="clearInput(item)" v-if="item.isEditing"
                     class="btn border btn-circle tour-list-delete-btn">Cancel</button>
                  </span>
                  <span>
                  <button @click="deleteTour(item.id, index)" v-if="!item.isEditing"
                     class="btn border btn-circle tour-list-delete-btn">Delete</button>
                  </span>