vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？

Question

<template>
   <!--这里如果axios还没有返回数据那么就报name undefined，这个怎么解决？？？-->
   <mycomponent :mydata="thisdata.name"/>
</template>
<script>
   export default{
     data(){
       return {
          thisdata:null
       }
     },
     methods:{
       getThisData(){
         let that = this;
         axios.get('')
         .then(function(res){
           that.thisdata = res.data;
         })
       }
     }，
     components:{
       mycomponent
     }
   }
</script>

Answer 1

<mycomponent :mydata="thisdata&&thisdata.name"/>这么做就不会报错了，

 getThisData(){
         let that = this;//可以不用that
         axios.get('')
         .then(function(res){
           that.thisdata = res.data;
         })
       }

直接用箭头函数：

 getThisData(){
         axios.get('')
         .then((res)=>{
           this.thisdata = res.data;
         })
       }

Answer 2

undefined是因为你没有初始化啊，你在data中初始化下它就行了

export default{
     data(){
       return {
          thisdata:{
              name: ''
          }
       }
     }
   }

Answer 3

加个 v-if 就可以了

<mycomponent :mydata="thisdata.name" v-if="thisdata.name"/>

Answer 4

<template>
   <mycomponent :mydata="thisdata.name" v-if="isloading"/>
</template>
<script>
export default {
    data () {
       return {
           isloading: false,
           thisdata: {}
       }
     },
     mounted () {
         this.getThisData()
     },
     methods: {
         getThisData () {
             let that = this
         
             axios.get('').then((res) => {
                 that.isloading = true
                 that.thisdata = res.data
             })
        }
     },
     components: {
         mycomponent
     }
}
</script>

Answer 5

data(){
    this.getThisData()
    return {
        thisdata:null
    }
},

运行才能取数据

Answer 6

改成同步，配合 async/await使用