Здравствуйте.
Для того, чтобы была возможность манипуляциями данными необходимо эти самые данные задать в секции data
.
Тогда появится возможность генерации таблицы с использованием цикла for
.
Для сохранения id
пользователя я отвел переменную idDeleteUser
- в нее заносится id
пользователя, поученный при нажатии на кнопку Удалить
в таблице.
После открытия модального окна и нажатия кнопки Удалить
уже в нем вызовется метод deleteUser
, который получит запомненный id
из переменной idDeleteUser
, вычислит индекс в массиве и удалит вычисленную строку.
Итоговый код:
let App = new Vue({
el: "#app",
data: () => ({
users: [{ id: 1, Name: 'Serega' },
{ id: 2, Name: 'Andrey' },
{ id: 3, Name: 'Shenia' },],
idDeleteUser: {},
}),
methods: {
setDeleteUser(id) { this.idDeleteUser = id },
deleteUser() {
let index = this.users.reduce((result, user, index) => user.id == this.idDeleteUser ? index : result, null)
this.users.splice(index, 1)
$("#exampleModalLong").modal('hide')
}
}
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="app">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">Логин</th>
<th scope="col">Действие</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td v-text="user.id"></td>
<td v-text="user.Name"></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" @click="setDeleteUser(user.id)">Удалить</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Точно удалить?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click="deleteUser()">Удалить</button>
</div>
</div>
</div>
</div>
</div>
Документация. Данные и методы. https://ru.vuejs.org/v2/guide/instance.html#%D0%94%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B8-%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D1%8B
Документация. Методы Vuejs: https://ru.vuejs.org/v2/guide/events.html