props传值在el-avatar图片展示的时候路径获取不到

最新推荐文章于 2023-11-15 18:27:09 发布

榴莲豆包

最新推荐文章于 2023-11-15 18:27:09 发布

阅读量643

点赞数 1

分类专栏： vue 文章标签： props传值

本文链接：https://blog.csdn.net/qq_41992943/article/details/117659930

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

父组件传值：

<comBaseInfo v-bind:bCompanyBO="bCompanyBO" ></comBaseInfo>

子组件通过props接收并在el-avatar中使用值：

<el-avatar shape="square" :size="55" :src="circleUrl" ></el-avatar>

 props: ['bCompanyBO'],
    data() {
      return {
        circleUrl: this.global.fileBaseUrl+this.bCompanyBO.logopath,
        staffSizeList:[],//人员规模列表
        financingSituationList:[],//融资情况列表
        workingYearsList:[],
        educationList:[],
        salaryRequireList:[],//期望薪资
        url:'',
      }
 },

值为undefined

原因：

props是异步的，还没有把值给到子页面就报错了。

修改：

加watch监听值是否变化

<el-avatar shape="square" :size="55" :src="url" :key="url" ></el-avatar>

props: ['bCompanyBO'],
    data() {
      return {
        circleUrl: this.global.fileBaseUrl,
        staffSizeList:[],//人员规模列表
        financingSituationList:[],//融资情况列表
        workingYearsList:[],
        educationList:[],
        salaryRequireList:[],//期望薪资
        url:'',
      }
    },
watch:{
      bCompanyBO:function(val){
        this.url =this.circleUrl + val.logopath;
      }
    }

赋完值图片就可以显示了。