I am facing a challenge with my child component that has a prop and a mounted function to initialize date and time. How can I update this function when the data from the parent is reloaded?
Here is the code for the Parent component:
<template>
<div>
<ul>
<li v-for="item in occurrences">
{{ item.title }} {{ item.completed }}</small>
</li>
</ul>
<sourceupd class="source" v-bind:source='source'></sourceupd>
</div>
</template>
<script>
import axios from 'axios'
import sourceupd from './SourceAndUpdated'
export default {
name: 'Occurrences',
components: {
sourceupd
},
data: function () {
return {
occurrences: [],
source: 'ANPC'
}
},
mounted: function () {
var _self = this
function callAPI () {
// call api code
}
callAPI()
setInterval(() => {
callAPI()
}, 1024 * 3)
}
}
</script>
And here is the code for the Child Component:
<template lang="html">
<small class="source-ref">Fonte: {{ source }} | Actualização:{{ updated.hour }}:{{ updated.minutes }}</small>
</template>
<script>
import moment from 'moment'
export default {
data: function () {
return {
updated: {
hour: '',
minutes: ''
}
}
},
props: ['source'],
mounted: function () {
moment.locale('pt')
this.updated.hour = moment().format('HH')
this.updated.minutes = moment().format('mm')
this.updated.seconds = moment().format('ss')
}
}
</script>
I'm looking for a way to update the time when callAPI() is reloaded. As a newcomer to Vue.js (or frameworks in general), I'm finding it challenging to manage dynamic information like this.
Thank you for your help!