时间戳

首页 > 解决方案 > Vue.js - 未捕获的类型错误：无法读取未定义的属性“推送”:1:12

javascript - Vue.js - 未捕获的类型错误：无法读取未定义的属性“推送”:1:12

问题描述

我收到一条错误消息：

未捕获的类型错误：无法在 :1:12 读取未定义的属性“推送”

在尝试通过 Chrome 中的控制台推送另一个项目以列出待办事项后：

app3.todos.push({ text: "New item" })

下面是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web for Vue.Js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app3 = new Vue({
                el:"#app3",
                data: {
                    todos:[
                        {text: "1"},
                        {text: "2"},
                        {text: "3"},
                        {text: "4"}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="app3">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
</body>

</html>

标签： javascripthtmlgoogle-chromevue.js

解决方案

将您的代码移出页面加载的事件处理程序，一切都会好起来的。否则，您将无法通过控制台访问变量实例。

Budulinek 昨天已经告诉过你了。:)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web for Vue.Js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app3">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <script>
            var app3 = new Vue({
                el:"#app3",
                data: {
                    todos:[
                        {text: "1"},
                        {text: "2"},
                        {text: "3"},
                        {text: "4"}
                    ]
                }
            });
    </script>
</body>

</html>

推荐阅读