我在默写并理解您这个代码的时候，自己写了一个无组件化的todolist(准备理解完成后再进行组件化) 可以写完代码后发现点击li时，删除的永远是第一个，以下是问题代码：

<div id="app">
	<input type="text" name="" v-model="inputVal" />
	<button v-on:click="onClick">提交</button>
	<ul>
		<li v-for="(item, index) in list" v-on:click="onDelete">{{item}}</li>
	</ul>
</div>
<script type="text/javascript">
		
		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputVal: ''
			},
			methods: {
				onClick:function(){
					this.list.push(this.inputVal);
					this.inputVal = ''
				},
				onDelete:function(index){
					this.list.splice(this.index, 1)
				}
			}
		})

</script>

请问是否因为Index值的问题还是其他什么情况，望老师给予解答（vue小白 -_-!）