vue.js - Vue 的methods的index参数问题

问题描述

问 题

    <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 对象？

解决方案

@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个元素了吧

这篇关于vue.js - Vue 的methods的index参数问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！