vue父元件向子元件傳遞非同步載入的資料不顯示解決方案
阿新 • • 發佈:2019-02-19
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); } }