[Vuejs]-Vue js edit content according to its ID

by

0👍

I think you can use add to each object of list new property isEditing and look for it in each item of the loop to check Save/Edit show.
Now your one prop editingTour can’t be used for multiple edit, it can’t store array of edited items id.
Template of buttons would look like:


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

Leave a comment