there is a parent component and a child component,
in the parent component, a data is obtained from the database and stored in a map,
then props this data to the subcomponent, which is a map, initializes the map directly on the lifecycle mounted and uses the properties of props to load mark points.
but it is found that the map is loaded and the mark point is not loaded. Finally, it is found that when the subcomponent mounted is initialized, the property of props does not have a value.
how to solve this problem:
the parent component gets data from the database
/* */
async initWzDataFromServer() {
let data = await getInitData() || []
data.result.map(item => {
this.wzSocket.set(item.deviceSn, item)
})
},pass to child components
<MapMark :initWzData="wzSocket"/>subcomponents get props
init() {
this.initMap()
this.initMarkerData()
},
mounted() {
this.init()
},I hope you can help
add that this is watch
watch: {
/* initWzData*/
localWzData: function (newValue) {
this.initMarkerData()
// for (let value of newValue.values()) {
// console.log(value)
// }
}
},this is data
data() {
return {
map: null,
localWzData: this.initWzData
}
},