How to emit momentjs dates in correct format - vue.js

Question

I am trying to format my data to send it to parent component but it seem like it is not reactive
if(this.selectedDate !== '' && this.selectedMonth !== '' && this.selectedDate !== '' ){
this.$emit("emit-data", this.selectedYr+"-"+moment().set(this.selectedDate) .format("DD")+"- "+moment().set(this.selectedMonth).format("MM"))
}
It won't send the selected drop-down but default ones which were pre-selected on page load. But If I take off moment() format from the data being sent, it sent correct values but I still need that format the data be in e.g YYYY-DD-MM
Is there any way to do this is computed using setters and getters before emitting? I am not sure how but If there is a way?

Answer 1

Yes, you can absolutely use a reactive computed getter for this. Here is an example:
<div id="app">
<parent-component />
</div>
const parentComponent = Vue.component('parent-component', {
data () {
return {
formattedDate: null
}
},
template: `
<div>
<p>You have selected: {{ formattedDate || "nothing yet" }}.</p>
<child-component
#emit-data="(payload) => formattedDate = payload"
/>
</div>
`
})
const childComponent = Vue.component('child-component', {
data () {
return {
selectedDate: null,
selectedMonth: null,
selectedYear: null
}
},
computed: {
formattedDate () {
if (![this.selectedDate, this.selectedMonth, this.selectedYear].every((el) => el)) return null
return moment({
day: this.selectedDate,
// Months in Moment.js are 0-indexed!
month: this.selectedMonth - 1,
year: this.selectedYear
}).format("YYYY-DD-MM")
}
},
watch: {
formattedDate (newVal) {
this.$emit("emit-data", newVal)
}
},
template: `
<div>
<input v-model="selectedDate" type="number" placeholder="Day" min="1" max="31" step="1">
<input v-model="selectedMonth" type="number" placeholder="Month" min="1" max="12" step="1">
<input v-model="selectedYear" type="number" placeholder="Year" min="1900" max="2100" step="1">
</div>
`
})
new Vue({
el: "#app"
})
You can run the above interactively on https://jsfiddle.net/46vuLcy0/.

Answer 2

Try
this.$emit('emit-data', moment(new Date(this.selectedMonth + "-" + this.selectedDate + "-" + this.selectedYr)).format(YYYY-DD-MM))
You can also see these examples
UPDATE
In the above code, your data is processed in to moment date. The result of this can be formatted in to your desired format.
Example
If you want the date to be 15-JUL-2020, you can have
moment(/* your date */).format('DD-MMM-YYYY')
Your can be directly provided to moment like
this.$emit("emit-data", moment(this.selectedYr + "-" + this.selectedDate + "-" + this.selectedMonth).format("YYYY-DD-MM"))
The code will result something like 2020-15-07 based on the format.