Vue 初始化数据报错的解决方案 TypeError: Cannot read property ‘xxx‘ of undefined

最新推荐文章于 2022-12-23 23:27:18 发布

原创

最新推荐文章于 2022-12-23 23:27:18 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

当我们vue项目渲染数据时，有时候页面渲染成功，但是控制台却报错： TypeError: Cannot read property 'xxx' of undefined 。这是因为一开始你渲染的数据还没有赋值成功，解决办法有两种：

1.首先看个例子（下面的html页面渲染时会报错：TypeError: Cannot read property 'firstName' of undefined）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决数据TypeError的问题</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <div id="app">
        <div>{
  
  {message.sex}}</div>
        <div>
            <span>{
  
  {message.name.firstName}}</span><span>{
  
  {message.name.lastName}}</span>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:""
            },
            methods: {