javascript - 关于vue父组件传入子组件的数据警告问题,求助!
伊谢尔伦
伊谢尔伦 2017-04-11 13:00:08
[JavaScript讨论组]

这里传入子组件的weatherData是异步获取的,传入子组件使用后,如果在子组件的模板中没有加v-if就会出现如下报错信息,我试了下,如果父组件传入的不是异步的数据就没问题,如果是异步的才会这样

父组件




export default {
  name: 'app',
  data(){
    return {
      weatherData: {}
    }
  },
  created(){
    var url = 'https://free-api.heweather.com/v5/weather?city=深圳&key=keycode';
    this.$http.get(url).then((response) => {
      response = response.body.HeWeather5[0];

        if(response.status == 'ok'){
          this.weatherData = response.now;
        }
    });
  },

  components: {
    vHeader: Header
  }
}

子组件

这里必须加一个v-if,如果不加就会出现警告信息
 

{{weather.cond.txt}}

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(4)
伊谢尔伦

这是因为组件生成时,传入的数据还没有从服务端获得。解决方法:
1、在页面没有获得信息之前,不显示组件,获得信息后再添加组件
2、给weather一个初始值,内容为{cond: {txt: ''}}

伊谢尔伦

也可以在父组件用v-if来判断子组件所依赖的数据是否准备完成.
将判断逻辑移到父组件中,大概会提高子组件的通用性.

阿神

表示也遇到过,个人认为还是需要加v-if来靠谱一些(当然这也是有同行朋友给我的解决方案)。

大家讲道理

因为还没有拿到数据所以提示你未定义,这个我之前在vue升级2.0的时候遇到过

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号