I’m making a simple VueJS application and I would like to display todays date and time and define it in DefineProps, I’ve tried the following in my component:
I would like to display todays date and time and define it in DefineProps, I’ve tried the following in my component:
<script setup>
const props = defineProps({
dateandtime: String
})
</script>
And in my view I have the following:
<Header dateandtime="test" />
I also tried putting new Date().toLocaleString() next to the dateandtime prop and I atleast expected something out of it but that didn’t work so easy.
2
Answers
If you want to pass date as props you have to generate your date in the parent component in this case
App.vue
. ThedefineProps
only serves as an interface to structure our props and define their types, defaults or if they’re required. Depending on how you want to pass yourdate
props, I have defined bothString
andDate
as acceptable prop types inHeader.vue
. Here is how you can do it:App.vue
Header.vue
First, update your component to pass the current date and time as a prop:
Now, in the parent component where you use Header, you can calculate the current date and time and pass it as a prop: