Vue 错误：TypeError：无法读取 Proxy.render 处未定义的属性“标题”

Posted 2023-02-18

【中文标题】Vue 错误：TypeError：无法读取 Proxy.render 处未定义的属性“标题”

【英文标题】：Vue error: TypeError: Cannot read property 'title' of undefined at Proxy.render

【发布时间】：2018-12-16 02:09:38

【问题描述】：

我发现了一些与我类似的问题，但没有一个足够清楚以解决我的具体问题。

我的 Test.Vue 组件中有这段代码，它被导入到我的 App.vue 文件中。

附：昨天我在做这个的时候一切都很好，我在做这件事时根本没有遇到任何错误。我刚刚关闭了我的笔记本电脑，今天再次打开它来处理它，当我刷新我的页面时开始出现这个错误。

<template>
    <div class = "test">
        <input type="text" v-model="title"> <br/>
        <h1>title</h1>
        <p>user.lastName</p>
        <p v-if="showName">user.firstName</p>
        <p v-else>Nada</p>

        <!-- <ul>
            <li v-for="item in items>item.title</li>
        </ul> -->

    </div>
</template>

<script>
export default 
    name: 'test',
    data() 
        return
            title: 'Hello World',
            user: 
                firstName:'John',
                lastName:'Doe'
            ,
            showName: true,

            // items: [
            //  title: 'Item One',
            //  title: 'Item Two',
            //  title: 'Item Three'
            // ]
        
    

</script>
<style scoped> 
</style>

使用我的代码中的内容 - 已经注释了在我的 <template> 中创建的行和 items:[] in ，一切

vue.esm.js?efeb:1741 TypeError: Cannot read property 'title' of 不明确的 在 Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?"id":"data-v-dc87507c","hasScoped":true,"transformToRequire":" video":["src","poster"],"source":"src","img":"src","image":"xlink:href","buble":"transforms": !./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Test.vue (0.b8f1eab6988182beecb6.hot-update.js:7), :37:59) 在 VueComponent.Vue._render (vue.esm.js?efeb:4544) 在 VueComponent.updateComponent (vue.esm.js?efeb:2788) 在 Watcher.get (vue.esm.js?efeb:3142) 在 Watcher.run (vue.esm.js?efeb:3219) 在 flushSchedulerQueue (vue.esm.js?efeb:2981) 在 Array.eval (vue.esm.js?efeb:1837) 在 flushCallbacks (vue.esm.js?efeb:1758)

【问题讨论】：

尝试重新编译。

对不起，我是新手，这是什么意思？

关闭浏览器当前工作的标签页。重启你的开发服务器，你就可以摆脱错误了。

【参考方案1】：

您的代码运行良好，请确保当您取消注释您的注释代码时，您在 items 之后加上引号（“）

<li v-for="item in items">item.title</li>

这就是它应该工作的全部。

这是工作的fiddle

如果您仍然收到它，只需关闭发球并重新开始。

希望对你有帮助。

【讨论】：

关于服务器的快速问题。我显然是一个新手，所以我需要一些澄清。当我在终端中执行“npm run dev”时，它运行正常并给了我我的 localhost:8080 服务器，它告诉我它当前正在运行。我该如何摆脱这种情况，我应该在什么时候执行“npm build dev”？谢谢！

我修复了语法错误，但我的控制台中仍然出现同样的错误。上面的评论说尝试再次编译，我该怎么做？

您是否尝试重新启动“npm run serve”？

我尝试执行“npm run dev”，但没有解决。我应该做的不止这些吗？

解决了我的问题。事实证明，我试图访问的状态并不像我想象的那样存在。所以我的组件连接正确，但是我有一个 Vuex Store 操作，它提交了一个带有“未定义”的突变，而不是我期望它拥有的数据。因此，当组件尝试渲染时，我的状态属性之一实际上是未定义的，我试图访问该未定义属性的属性。我认为更严格的测试或在 TypeScript 中使用一些强类型会帮助我更早地发现这个问题，不确定。

【参考方案2】：

您在此处缺少结束引号：

<li v-for="item in items>item.title</li>

您应该在items 之后添加引号。然后就可以了。

【讨论】：

我在我的代码中修复了这个问题，但我仍然遇到同样的错误。我认为这是服务器问题，而不是代码本身，代码本身是正确的。我应该重做 Vue 的哪一部分停止然后继续我的工作？

【参考方案3】：

TypeError 已经把所有的事情都告诉你了。首先，你应该知道 Proxy.render 是谁，当它加载时，发生了什么，好吗？ 然后，在这个渲染时 undefined 的属性'title'，这意味着当这个页面渲染时，实例，可能它被称为'vm.$el'，找不到这个属性，但是它需要这个属性，所以你需要正确初始化此属性。 例子： 如果你在模板中写这个：

<li v-for="item in items" :key="item">item[a.b].title</li>

你定义的数据是这样的：

a:,


items: [title: 'Item One'],

你会得到：

enter image description here

因为渲染时找不到a.b