学习todolist，学习理解时遇到的一些关于index的问题

Question

我在默写并理解您这个代码的时候，自己写了一个无组件化的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小白 -_-!）

Answer 1

琑儿 2019-07-22 15:50:12

onDelete:function(index){
	this.list.splice(this.index, 1)
}
//改为
onDelete:function(index){
	this.list.splice(index, 1)
}

• 提问者 差不多可不行 #1

  感谢回复，但是我测试了一下  貌似删除的还是首位，就是说我点的是第三个li 但是删除的是第一个li

• Dell 回复 提问者 差不多可不行 #2

  <li v-for="(item, index) in list" v-on:click="onDelete">改成<li v-for="(item, index) in list" v-on:click="()=>onDelete(index)">

• 提问者 差不多可不行 回复 Dell #3

  谢谢老师

点开查看后面2条评论