Question

我从vue js开始，我列出了数据库中的一些数据。更具体地说，带有标题，描述和图像的帖子。

我有“编辑”和“删除”按钮。所有帖子均使用v-for加载。因此，当我单击以编辑一个帖子时，所有帖子都将“打开”以进行编辑。

我一次只需要在一篇文章中打开编辑内容。我的意思是，我确实要编辑的特定帖子。

我在标题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

我认为您可以将add添加到列表新属性isEditing的每个对象中，并在循环的每个项目中查找它以检查Save / Edit的显示。现在，您的一个道具editingTour无法用于多次编辑，它无法存储已编辑项ID的数组。按钮模板如下所示：


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

Vue JS根据其ID编辑内容

1 个答案: