Где ошибка в ToDo List на Vue?

Question

[CoyoteSS]

Имеется индексный файл HTML с подключённым Vue через CDN.
Новые задачи тдлиста добавляются на ура, но проблема с удалением последней задачи, она попросту не удаляется.
Не могу разобраться, помогите.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="root">
	<ul>
		<li v-for="on in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(on.key)">Delete</button></li>
	</ul>
	<input v-model="gulp">
	<br>
	<button v-on:click="addList">Add</button>
</div>
<script>
	const vm = new Vue({
		el: '#root',
		data: {
			list: [],
			keys: 0,
			gulp: '',
		},
		methods: {
			addList: function() {
				this.list.push({ title: this.gulp, key: this.keys++ });
			},
			deleteList: function(num) {
				this.list.splice(num, 1);
			},
		},
	});
</script>

Answer 1

[Денис Грибанов]

Это

<li v-for="on in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(on.key)">Delete</button></li>

Превратить в это

<li v-for="(on, index) in list" v-bind:key="on.key">{{ on.title }}<button v-on:click="deleteList(index)">Delete</button></li>

Comments

[CoyoteSS]

Кратко, лаконично, без лишних слов, спасибо)

Answer 2

[Eugene Chefranov]

Удаляйте по индекс из цикла

Answer 3

[coderisimo]

1) все работало и так
2) вам не нужно генерировать key вручную

key: this.keys++

можно использовать готовый индекс key :
<li v-for="on, key in list" v-bind:key="on.key">

3) при добавлении нового элемента стоит очищать поле ввода , в противном случае приходится все время чистить поле вручную