My hierarchy is structured like this:
Root
App
- TimelineItem
- TimelineMetadata
- TimelineItem
In app.vue, I make HTTP requests on mounted and populate a timeline variable with the fetched data.
<template>
<div id="app">
<div class="loading" v-show="loading">Loading ...</div>
<table class="timeline">
<TimelineItem v-for="event in timeline" :key="event.id" :item="event" :players="players" :match="match"></TimelineItem>
</table>
</div>
</template>
export default class App extends Vue {
...
public timeline: any[] = [];
public mounted() {
...
if (!!this.matchId) {
this._getMatchData();
} else {
console.error('MatchId is not defined. ?matchId=....');
}
}
private _getMatchData() {
axios.get(process.env.VUE_APP_API + 'match-timeline-events?filter=' + JSON.stringify(params))
.then((response) => {
this.loading = false;
this.timeline = [];
this.timeline = response.data;
}
...
}
The TimelineItem component looks like this:
<template>
<tr>
<td class="time">
...
<TimelineItemMetadata :item="item" :match="match"></TimelineItemMetadata>
</td>
</tr>
</template>
....
@Component({
components: {
...
},
})
export default class TimelineItem extends Vue {
@Prop() item: any;
@Prop() match: any;
@Prop() players: any;
}
</script>
Lastly, the TimelineItemMetadata component displays the item passed to it:
<template>
<div>
TEST1
{{item}}
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({})
export default class TimelineItemMetadata extends Vue {
@Prop() item: any;
@Prop() match: any;
@Watch('match') onMatchChanged() {
console.log('TEST');
}
@Watch('item') onItemChanged() {
console.log('ITEM', this.item);
}
public mounted() {
console.log('Timeline metadata item component loaded');
}
}
</script>
The @Watch for item and match is not triggering even though there is data present according to Vue-devtools. Why is my @Watch not being triggered?