vue:未捕获类型错误:无法读取未定义的属性...

arknldoa  于 2023-04-07  发布在  Vue.js
关注(0)|答案(4)|浏览(250)

我正在使用vue@2.1.3和vue official webpack template来构建一个应用程序。
在本地开发的时候,经常会看到Uncaught TypeError: Cannot read property ... of undefined的警告,但是HTML可以渲染成功,但是用npm run build命令部署到Netlify的时候,HTML就不能渲染了,所以我必须认真对待这个警告。
我从here那里了解到,这是因为“当组件被呈现时,数据并不完整,而是从API加载的”,解决方案是“只有在数据被加载后,才使用v-if来呈现模板的那部分”。
有两个问题:
1.我试过用v-if Package 多个产生警告的语句,但我个人认为这个解决方案太冗长了,有没有更简洁的方法?
1.本地开发中的“警告”在生产中变成了“致命错误”(HTML无法渲染)。如何使它们在两个环境中相同?例如,它们都发出警告或错误?

owfi6suc

owfi6suc1#

只需要在模板中所有元素的公共父元素上使用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>
chhqkbe1

chhqkbe12#

你有没有试过初始化你需要的所有数据?例如,如果你需要abc,你可以这样做:

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错误

1cosmwyk

1cosmwyk3#

伙计们是对的,但我可以添加一些东西。如果有可能你的根元素在条件中可能是未定义的,出于某种原因,这是一个很好的做法,使用这样的东西:v-if='rootElement && rootElement.prop'。它将确保您不会获得cannot get property prop of undefined,因为当rootelement未定义时,它不会进一步检查。

ohfgkhjo

ohfgkhjo4#

2021 vue3
我们可以这样使用

props: {
    form: {
      type: String,
      required: true,
    },
 setup(props, context) {
    console.log(props.form)

相关问题