<div id="app4">
<input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button v-on:click="removeTodo">X</button>
</li>
</ul>
</div>
new Vue({
el: "#app4",
data:{
todos: [
{text: 11111},
{text: 22222},
{text: 33333}
]
},
methods: {
addTodo: function(){
var newTodo = this.newTodo.trim();
if(newTodo){
this.todos.push({text: newTodo})
this.newTodo = ""
}
},
removeTodo: function(index){
console.log(index); // 为什么输出控制台的是mouseEvent 对象
this.todos.splice(index, 1)
}
}
})
点击按钮时,会触发 removeTodo方法,但是为什么index 会输出以下 MouseEvent 对象?
<button v-on:click="removeTodo">X</button>
removeTodo不加参数的时候,vue默认会往里面传一个event参数.
你要是想用index,应该这么写
<button v-on:click="removeTodo($index)">X</button>
@daimon 其实说的已经很正确了
我之所以还要再回复一次,是基于你给@daimon 的评论:
首先,button
的click
事件,在不显示指定传入值的情况下,默认传入的是Event
对象,完美,没毛病,这和你的变量名是否叫index
或者e
没有半毛钱关系。如果对此不了解,看官网例子:
至于你说“而下一句语句this.todos.splice(index, 1) 却能正常运行”,其实是个不正确的说法。这段代码并没有正确执行,只是没报错而已。如果你仔细观察,无论你点击哪个X
,永远都是第0
个元素被删除了(这不是你想要的,对吧?)。但这又是为什么?既然index
这里是个Event
对象,那怎么还能在splice
方法里使用呢?这个就需要看标准文档了,ECMAScript-262:
注意我选中部分,她说要对
start
参数做ToInteger
才能得到真正的relativeStart
,ok,那我们再来看看ToInteger
是怎么工作的
在第一步,对
start
做ToNumber
之后,我们知道得到的是一个NaN
,现在注意我选中部分,得到的是0
。
现在知道为什么this.todos.splice(index, 1)
不报错,但却永远都删除第0
个元素了吧