Vue2.0 通过forin无法获取到vue的属性值

Vue2.0 通过forin无法获取到vue的属性值
我通过for.in 来遍历vue里data的userInfo对象,想得到userInfo对象下的每一个属性名。
再通过控制台输出this.userInfo.item 获取到每一个对象名的值
问题出在无法获取到值(输出undefined),貌似只能在Vue实例里用真的属性名来获取值,用item替代属性名就无法获取。
请问怎么解决?还有我这个思路的错误在哪里,请指教。


let vm=new Vue({
            el:'#box1',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    sex:'男',
                    age:18,
                    hobby:[],
                    campus:'',
                    other:'请简述你自己',
                    accept:''
                }
            },
            methods: {
                demo(){
                    for(item in this.userInfo) {
                        console.log(item)
                        console.log(this.userInfo.item);//获取不到值,都是undefined
                    } 
                },
            }
        })

“Devil组”引证GPT后的撰写:

  • 要访问对象的属性,可以使用方括号语法,像这样:this.userInfo[item]。这将使用变量 item 的值来访问 userInfo 对象中的属性。

所以您的代码可以改成以下方式:

let vm=new Vue({
    el:'#box1',
    data:{
        userInfo:{
            account:'',
            password:'',
            sex:'男',
            age:18,
            hobby:[],
            campus:'',
            other:'请简述你自己',
            accept:''
        }
    },
    methods: {
        demo(){
            for(let item in this.userInfo) {
                console.log(item)
                console.log(this.userInfo[item]);
            } 
        },
    }
})


这样就可以正确地访问 userInfo 对象中的属性了。注意使用 let 关键字声明变量,避免变量污染。

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^