Vue2.5 methods中遍历data数组对象取值undefined的问题求解

• 数组属性访问错误：this.list是存储账号信息的数组类型数据，本身不存在user属性，直接执行console.log(this.list.user)必然返回undefined。模板中v-for可以正常渲染，是因为指令内部循环取出了数组中的单个账号对象，并非直接读取数组根节点的属性。
• 遍历逻辑错误：for...in语法遍历数组时，循环变量拿到的是数组的字符串格式索引（例如"0"、"1"），不是数组内存储的账号对象，因此读取item.user时，实际是在读取字符串索引值的user属性，自然返回undefined。
• 语法结构错误：原代码checkPass方法内的for循环、if判断都缺少闭合大括号，会直接触发JS语法解析错误。
• 兼容隐患：原代码data中tryPass:''末尾多了冗余逗号，在低版本JS环境下可能触发语法解析错误。

优先推荐用数组原生find方法做账号匹配，代码更简洁易读，修正后的checkPass方法逻辑如下：

checkPass(){
    // 匹配list中用户名和输入一致的账号
    const targetAccount = this.list.find(item => item.user === this.tryUser)
    if(!targetAccount){
        alert('用户名不存在')
        return
    }
    if(targetAccount.password === this.tryPass){
        alert('校验通过')
        // 此处编写登录成功后的业务逻辑即可
    }else{
        alert('密码错误')
    }
}

如果习惯用for循环实现，不要用for...in遍历数组，改用for...of直接获取数组元素：

checkPass(){
    for(const account of this.list){
        if(account.user === this.tryUser){
            if(account.password === this.tryPass){
                alert('校验通过')
            }else{
                alert('密码错误')
            }
            return
        }
    }
    alert('用户名不存在')
}

完整修正后的Vue实例代码：

const app = new Vue({
    el:"#app",
    data:{
        list:[
            {user:'cpalma',password:'123456'},
            {user:'cjara',password:'654321'}
        ],
        tryUser:'',
        tryPass:'' // 移除了末尾冗余逗号
    },
    methods:{
        checkPass(){
            const targetAccount = this.list.find(item => item.user === this.tryUser)
            if(!targetAccount){
                alert('用户名不存在')
                return
            }
            if(targetAccount.password === this.tryPass){
                alert('登录成功')
            }else{
                alert('密码输入错误，请重试')
            }
        }
    }
})

内容的提问来源于stack exchange，提问作者donlurdd