1. 程式人生 > >vue父元件向子元件傳遞非同步載入的資料不顯示解決方案

vue父元件向子元件傳遞非同步載入的資料不顯示解決方案

1、父元件

<wxChat 
            :data="wxChatData"
            :showShade="false"
            :contactNickname= doctor.doctorName           
            :ownerAvatarUrl="ownerAvatarUrl"
            :contactAvatarUrl="contactAvatarUrl"
            :width="width">
        </wxChat>

2、子元件接收data

props: {
    data: {
       type: Array,
       required: true
    }
},

3、子元件渲染資料

<ul>
    <li v-for="(message, index) in dataArray" :key="index" >
         .....            
    </li>
</ul>

解決方案:監聽父元件傳來的資料,動態改變子元件中使用的變數

watch: {
     data: function(val) {
         console.log('val監聽:',val)
         this.dataArray = this.dataArray.concat(this.data);
     }
}