Antoxins
@Antoxins
Junior/Traini Frontend Developer

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

5f883733218f5801164293.png
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
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
Atanvar
@Atanvar
Frontend developer
Кнопка отрабатывает клик - передается в функцию idшник элемента по которому кликнули.

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

"я только учусь" не повод чтобы за вас всё сделали другие
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Antoxins
@Antoxins Автор вопроса
Junior/Traini Frontend Developer
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])
    },
}

Подскажите что не так делаю?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы