Vue.js控制台执行push报错：Uncaught TypeError: Cannot read property 'push' of undefined

我来帮你搞定这个报错！你遇到的 Uncaught TypeError: Cannot read property 'push' of undefined，根源是变量作用域的问题——你把 app3 这个Vue实例定义在了 window.onload 的函数内部，它属于局部变量，只能在这个函数的作用域里访问；而Chrome控制台是全局作用域，根本找不到 app3，自然就会报“读取undefined的push属性”的错误。

下面给你两种可行的解决办法：

方案一：把Vue实例暴露到全局作用域（推荐） #

修改你的脚本代码，把 var app3 改成 window.app3，让实例成为全局变量，这样控制台就能直接访问了：

window.onload = function () {
  window.app3 = new Vue({
    el:"#app3",
    data: {
      todos:[
        {text: "1"},
        {text: "2"},
        {text: "3"},
        {text: "4"}
      ]
    }
  });
}

改完之后，你在控制台执行 app3.todos.push({ text: "New item" }) 就能正常添加todo项，而且Vue的响应式会自动生效，页面会立刻显示新的条目。

方案二：不修改代码，直接在控制台获取Vue实例 #

如果你不想改动现有代码，可以通过Chrome控制台的特殊变量和Vue的内部引用直接拿到实例：

1. 打开Chrome开发者工具的「Elements」面板，点击选中页面里的 <div id="app3"> 元素
2. 切换到「Console」面板，输入以下命令获取实例并添加todo：

// $0是Chrome控制台的特殊变量，代表当前选中的元素
$0.__vue__.todos.push({ text: "New item" })

另外补充一句：你用的是Vue 2.x版本，数组的push方法是被Vue劫持过的，修改后会自动触发视图更新，这点完全没问题~

内容的提问来源于stack exchange，提问作者M. Falex