Transfer data from child component to parent component

Question

I have a form (parent) component with two input text fields and date field for which vuejs-datepicker component is used (child component. See below:

Form component

<template>
<div>
    <form>
        Name<input type="text" v-model="name"/><br>
        Age <input type="text" v-model="age"/><br>
        <calendar2 @wybrano="zm($event)"></calendar2>
        <button type="button" @click="sendfo()">Wyslij</button>
    </form>
</div>
</template>

<script>
export default {

    data() {
        return {
            name:"",
            age:"",  
            da:""
        }
    },
    created() {


    },
    methods: {
        zm: function(ev) {
            this.da=ev
        },

        sendfo: function() {
            var t = this
            axios({
                method:"POST",
                url: "sendfo",
                data: {
                    name:"messi",
                    age:32,
                    data:t.da

                },
            }).then(function(response) {
                console.log('done');
            })



        }

    }
}
</script>

Calendar component

<template>
<div>
<datepicker v-model="data" name="data" :format="ff" :monday- 
first="mondayFirst" :clear-button="clearButton" :calendar- 
button="calendarButton" @selected="sel"></datepicker>
</div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
 export default {
components: {
  Datepicker
},
created() {


},


data() {
  return {
    data: "",
    mondayFirst: true,
    clearButton: true,
    calendarButton: true,
  }
},
methods: {
  sel: function() {
    if(this.data){
    this.data=this.data.toISOString().substr(0,10)
    this.$emit('wybrano', this.data)
    }
    },


    }
  }
</script>

My purpose is to use form component to collect form data and send them via ajax to database. As you can see in the code I use $emit to transfer data from calendar component to the parent component. Everything work almost fine but... Selected (by user) date in calendar component is different than this date transferred to the parent component. I give few examples;

date selected in calendar 07/08/2018 -> var data="07/08/2018" -> var da=""
date selected in calendar 09/12/2018 -> var data="09/12/2018" -> var da="07/08/2018"
date selected in calendar 01/01/2018 -> var data="01/01/2018" -> var da="09/12/2018"

I hope my problem is understandable. Every time var da in parent component takes value from previous selection. Please help me solve the problem.

Answer 1

First thing I would try is change these two lines so you don't change the bound model value:

var payload=this.data.toISOString().substr(0,10)
this.$emit('wybrano', payload)

Answer 2

You could try using v-model on the calendar component.

With this approach VueJS will may have the good reactivity to the selection of the date.

Documentation: Using v-model on Components

/// Form component

...
<calendar2 v-model="da" />
...

/// Calendar component

... in the template
<datepicker v-model="value" input="$emit('input', $event.target.value.toISOString().substr(0,10))" ... />
...

... in the script
data() { /* datepicker configuration */ },
props: ['value'],
...

Answer 3

Maybe it will be enough to change this line:

this.$emit('wybrano', this.data)

like this:

this.$nextTick(this.$emit('wybrano', this.data))

Answer 4

This issue is due to the fact that the selected event is propagated before the data property gets updated (thus causing the previous selected value to be emitted).

To be sure to propagate the selected date once it is updated, you could instead use a watcher method to observe changes for the data property.

Then, in the watcher method, you would emit your event as already done.

So in the ///Calendar component you would have something like this, where @selected is removed:

<datepicker v-model="data" name="data" :format="ff" :monday- 
  first="mondayFirst" :clear-button="clearButton" :calendar- 
  button="calendarButton"></datepicker>
///
 methods: {
   ...
   watch: {
     'data' () {
       this.$emit('wybrano', this.data.toISOString().substr(0,10))
     }
   }

Then, I would advice you to use meaningful functions, variable names, in order to ease code readability and maintenance.

For example, you could rename Calendar data to someDate (some needs to be clarified). wybrano event named would be renamed to *someDateUpdated. zm function name also is not clear.