Passing Custom Event back to child component through prop array in VueJs - vue.js

Question

I am trying to update a child component element through a custom event and know I am getting back to the root component as an alert gives me the current date and time, but I can not update the child component through the prop. This is a follow on question to this question and answer:
(irrelevant code omitted)
In my child component I have as follows:
<template>
<div id="bar">
<div class="row">
<div class="column">
<h3>Timestamp Page Loaded: </h3>
<h3>{{currentTime}}</h3>
</div>
<div class="column">
<button v-on:click="update()">Click to get Current Timestamp</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
barData: Array
},
data() {
return {
callNow: this.barData[0].callNow,
currentTime: this.barData[0].currentDT,
}
},
methods: {
update: function () {
const today = new Date();
const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
const dateTime = date + ' ' + time;
this.$emit('newDateTime', dateTime)
}
},
}
</script>
And in my root component I have as follows:
<template>
<div>
<bbay-bar v-bind:barData="barData" v-on:newDateTime='upDateTime($event)'></bbay-bar>
</div>
</template>
<script>
import Bar from './Components/SiteWide/Bar.vue'
export default {
components: {
'bbay-bar': Bar,
},
data() {
return {
barData: [{
callNow: '0411111111',
currentDT: '',
}],
}
},
methods: {
upDateTime: function (update){
//this.$alert(update, “thus so far“);
this.currentDT = update;
}
}
}
</script>

Answer 1

You're using props to initialize data in the child component, then using those values in the child component's template. Changes to props afterwards won't affect the child component's data, so the template isn't updated. This scenario is brought up in the Vue docs here.
If you don't require an array for barData, I'd recommend making it an object so your data look like this:
data() {
return {
barData: {
callNow: '0411111111',
currentDT: '',
},
}},
Then in the child component you could pass the prop like so:
props: {
barData: Object
},
When you use the value in the child component, it'd then look like this:
<h3>{{ barData.currentDT }}</h3>
One thing I noticed is that in the upDateTime function you are updating this.currentDT. Previously your data property had a barData array with an object that has a field named currentDT, so this method wasn't updating the correct field. Given that barData is changed to an object, the method should be changed to update this.barData.currentDT