Как удалить элемент через кнопку с подтверждением?

Question

[Anton Vorobiev]

Create.vue - страница для создания контракта и сохранения данных в localStorage
List.vue - отображение значения из localStorage в таблицу через
v-for="" :key="contact.id"
Contact.vue - отображение информации о контакте
Есть элемент таблица, в которую заносятся значение объекта contacts из localStorage, нужно

• по нажатию кнопки реализовать удаление конкретной строки таблицы (из localStorage ) (с подтверждением)
  
  
• с возможностью обратного действия.
  

Я только начинаю изучать Vue, поэтому если можно подробней в каких файлах что прописывать надо.
исходный код:
https://github.com/Antoxa291/Contact-book-Vue.js-.git

Answer 1

[Владимир Боруткин]

Кнопка отрабатывает клик - передается в функцию idшник элемента по которому кликнули.

функция через find ищет запись = idшнику который пришел т клика по кнопке.
удаляете запись через splice или delete

"я только учусь" не повод чтобы за вас всё сделали другие

Comments

[Anton Vorobiev]

не прошу скидывать готовый код, но хотя бы подскажите в каком файле что добавить.

функция через find ищет запись = idшнику который пришел т клика по кнопке.
удаляете запись через splice или delete

а как с localStorage удалить?

[Alex]

а как с localStorage удалить?

Anton Vorobiev, Перезаписать новым значением

Answer 2

[Anton Vorobiev]

contacts is not defined - ошибка в консоли

Метод в List.vue:

methods: {
        deleteСontact(index) {
            const Index = contacts.findIndex(t => t.id === id)
            this.$delete(this.contacts, Index)
        }
    },

В store.js прописан

actions: { 
deleteContact({commit}, id) {
      commit('deleteContact', id)
    },
}

и

mutations: { 
deleteСontact(state, id) {          
      const idx = contacts.findIndex(t => t.id === id);        
      localStorage.removeItem(state.contacts[idx])
    },
}

Подскажите что не так делаю?