提示：未捕获的TypeError：无法读取未定义的属性…

vue.js Vue.js

StafanPro小哥

2020-03-12

我正在使用vue@2.1.3和vue官方Webpack模板来构建应用程序。

在本地进行开发时，经常会看到警告Uncaught TypeError: Cannot read property ... of undefined，但是可以成功呈现HTML。但是，将HTML部署到带npm run build命令的Netlify时无法呈现HTML 。因此，我必须认真对待这个警告。

我从这里了解到这是因为“呈现组件时数据不完整，而是从API加载的”。解决方案是“ v-if仅在加载数据后才使用渲染模板的那一部分”。

有两个问题：

  1. 我尝试环绕v-if产生警告的多条语句，但个人认为此解决方案很冗长。有没有一种整洁的方法？
  2. 本地开发中的“警告”变成生产中的“致命错误”（无法呈现HTML）。如何使它们相同？例如他们两个都发出警告或错误？

第1228篇《提示：未捕获的TypeError：无法读取未定义的属性…》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Sam小哥逆天 2020.03.12

只需v-if对依赖于该AJAX调用的模板中的所有元素使用一个公共父元素，而不是围绕每个元素。

因此，而不是像这样：

<div>
  <h1 v-if="foo.title">{{ foo.title }}</h1>
  <p v-if="foo.description">{{ foo.description }}</p>
</div>

做

<div>
  <template v-if="foo">
    <h1>{{ foo.title }}</h1>
    <p>{{ foo.description }}</p>
  </template>
</div>
Itachi泡芙Pro 2020.03.12

您是否尝试初始化所需的所有数据？例如，如果需要a b c，您可以执行以下操作：

new Vue({
  data: {
    a: 1,
    b: '',
    c: {}
  },
  created(){
    // send a request to get result, and assign the value to a, b, c here

  }
})

这样您就不会xx is undefined出错

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android