Есть массив с todo листом. Мне нужно, чтобы при нажатии на кнопку удаления у меня находился индекс элемента массива, который пользователь хочет удалить через цикл. Заранее извиняюсь, если код выглядит плохо. Я только начинаю программировать. Писал код на vue js.
var app = new Vue({
el: '#app',
data() {
return {
name: "",
count: 0,
list: [{
id: 1,
body: 'Покушать'
},
{
id: 2,
body: 'Сходить в магазин'
}
]
}
},
methods: {
create() {
const newList = {
id: Date.now(),
body: this.name
}
this.list.push(newList);
this.name = ''
}
}
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.todolist {
margin: 15px;
padding: 10px;
border: 2px solid orangered;
}
.input {
border: 3px solid rgb(235, 165, 104);
margin: 5px;
padding: 10px;
text-align: center;
width: 100%;
}
.del {
border: 2px solid orangered;
padding: 5px;
margin: 5px;
width: 50%;
text-align: center;
position: absolute;
top: 50px;
left: 50%;
}
.create {
border: 2px solid rgb(52, 194, 52);
padding: 5px;
margin: 5px;
width: 50%;
text-align: center;
position: absolute;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form @submit.prevent>
<input v-model="name" type="text" placeholder="Введите задачу" class="input"> <br> <br>
<button @click="create()" class="create">Создать</button> <br>
<button class="del">Удалить</button>
</form>
<div class="todolist" v-for="(todolist,index,) in list">
<div>
Название: {{ todolist.body }}
</div>
</div>
</div>
div
записать в атрибутdata-id
...div
. Думаю логичнее кнопку удалить сделать рядом с каждым элементом списка, и в эту кнопку записывайтеid
. А потом создайте метод для удаления