Uncaught TypeError: Cannot read properties of undefined (reading ‘password‘)

最新推荐文章于 2025-05-26 13:41:57 发布

csdou

最新推荐文章于 2025-05-26 13:41:57 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/csdou/article/details/126856979

在尝试像Vue官方教程那样渐进式使用Vue时，遇到数据绑定错误。在`home.js`中定义的数据对象，`username`可以正常工作，但`user.password`无法显示，导致`Uncaught TypeError`。通过更改`user`为`userOne`，问题得到解决。问题可能源于对Vue数据绑定的理解不透彻或者模板语法的错误使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

像使用jQuery一样或者说像Vue官方说的那样，渐进式使用Vue，于是，引入了Vue的js文件，开始了Vue编码。定义了一个Data对象，死活无法使用，一直报错，一直在网上找答案，一直没有找到，学艺不精，先看下报错信息：

vue.global.3.2.38.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'password')
    at Proxy.render (eval at vp (vue.global.3.2.38.js:7), <anonymous>:100:39)
    at Wn (vue.global.3.2.38.js:7)
    at ye.fn (vue.global.3.2.38.js:7)
    at ye.run (vue.global.3.2.38.js:7)
    at L.e.update (vue.global.3.2.38.js:7)
    at L (vue.global.3.2.38.js:7)
    at P (vue.global.3.2.38.js:7)
    at F (vue.global.3.2.38.js:7)
    at g (vue.global.3.2.38.js:7)
    at ne (vue.global.3.2.38.js:7)

再看下数据定义方法（home.js）：

const {createApp} = Vue

createApp({
    data() {
        return {
            user: {
                username: "请输入手机号/邮箱",
                password: "请输入密码",
            },
            username: "请输入用户名",
            password: "请输入密码",
        }
    }
}).mount('#app')

再看下使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/js/vue.global.3.2.38.js"></script>
</head>

<body>
<div id="app">
    <input type="text" :placeholder="username" />
    <input type="text" :placeholder="user.password" />
</div>
<script src="/js/home.js"></script>
</body>
</html>

就是这么简单，就是这么神奇，username是OK的，user.password就是不行，死活不行，看了网上的资料，官网的用法，看了一遍又一遍，快放弃了，算了，是不是user是关键字，于是，换了个写法，把user换成了userOne，问题就解决了。

<input type="text" :placeholder="userOne.username" />
<input type="text" :placeholder="userOne.password" />