有时候会遇到给页面绑定数据的时候,可以绑定成功,但vue warn:xxx属性of undefined,,,如果本组件只是绑定简单的数据倒是可以忽略,如果本组件还引入了其他组件或第三方组件,插件,则就渲染不出来,就需要解决了,

<template>
    ...
    <span>{{data.xxx.xx}}</span>
    ...
</template>

<script>
export default {
  data () {
    return {
      data: {
      	xxxx:""
      }
    };
  },
  methods: {
   .....请求到数据赋给data.xxxx;
  }
  created () {
    this.getData();
  }
};
</script>  

页面上能渲染成功,但是vue仍然警告数据属性undefined,,
因为是异步请求,页面渲染刚开始的时候还没有拿到这个值,所以会报错。你需要在节点上用if判断一下,在有数据的时候再进行渲染。

<template>
    ...
    <span v-if="data.xxx&& data.xxx.xx">{{data.xxx.xx}}</span>
    ...
</template>

或者你在声明data的时候,将里面的字段也一并声明出来,往下多声明一下数据。

参考https://www.cnblogs.com/huancheng/p/9188287.html


2019.11.15 更新

在详解vue父组件传递props异步数据到子组件的问题文章里有多种解决方案:传送门

Logo

前往低代码交流专区

更多推荐