34

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

本地开发的时候经常看到warning Uncaught TypeError: Cannot read property ... of undefined，但是可以成功渲染html。但是，使用命令将 HTML 部署到 Netlify 时无法呈现 HTML npm run build。所以我必须认真对待这个警告。

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

有两个问题：

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

4 回答 4

59

只需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>
于 2016-12-09T02:06:01.230 回答
8

伙计们是对的，但我可以补充一点。如果条件中的根元素可能由于某种原因未定义，则最好使用类似的东西：v-if='rootElement && rootElement.prop'. 它将保护您免受cannot get property prop of undefined何时rootelement未定义，它不会进一步检查。

于 2016-12-09T08:07:19.210 回答
7

您是否尝试过初始化所需的所有数据？例如，如果你需要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错误

于 2016-12-09T02:44:37.820 回答
2

2021 vue3

我们可以这样使用

props: {
    form: {
      type: String,
      required: true,
    },
 setup(props, context) {
    console.log(props.form)
于 2021-11-30T04:56:05.477 回答