Form dosen't submit all data

you can try transfer the computed data to scope variable inside of your axios method. methods... const myVal = this.numberOfDays axios.post.... dates: myVal, ...

I do not understand.

`

import axios from 'axios'; import kennitala from 'kennitala'; import moment from 'moment'; import payment from './Payment.vue';

export default {
    components: { payment },

    data() {
        return {
            errors: [],
            services: [],
            selectedValue: null,
            step: 1,
            booking:{
                carNumber: null,
                carSize: "Bíltegund",
                carType: null,
                carSubtype: null,
                carColor: null,

                name: null,
                socialId: null,
                email: null,
                phone: null,

                dropOffDate: null,
                dropOffTime: "Hvenær mættiru á Leifstöð",
                pickUpDate: null,
                pickUpTime: "Hvenær viltu sækja bílinn?",
                flightNumber: null,
            },
            discount: null,
            showPayment: false,
            price: 4500,

            start: null,
            end: null
        }
    },

    methods: {
        const val = this.numberOfDays;
        createBooking() {
            axios.post('/api/booking/create', { 
                carNumber: this.booking.carNumber,
                carSize: this.booking.carSize,
                carType: this.booking.carType,
                carSubtype: this.booking.carSubtype,
                carColor: this.booking.carColor,

                name: this.booking.name,
                socialId: this.booking.socialId,
                email: this.booking.email,
                phone: this.booking.phone,

                dropOffDate: moment(this.selectedValue.start, "MM/DD/YYYY"),
                dropOffTime: this.booking.dropOffTime,
                pickUpDate: moment(this.selectedValue.end, "MM/DD/YYYY"),
                pickUpTime: this.booking.pickUpTime,
                flightNumber: this.booking.flightNumber,

                dates: val,
                priceForDays: this.priceForDays,

                totalPrice: this.price,
                finalPrice: 100
            })
            .catch(error => {
                error.response.data;
            })
            .then(function (response) {})
        }
    },

    computed: {
        numberOfDays: function() {
            this.start = moment(this.selectedValue.start);
            this.end = moment(this.selectedValue.end);

            return Math.abs(this.start.diff(this.end, 'days'));
        }
    }
}`

Did not work

Your computed property is manipulating scope variables, that's not good. Instead maybe try:

computed: {
  numberOfDays: function () {
    return Math.abs(
      moment(this.selectedValue.start).diff(
        moment(this.selectedValue.end), 'days')
      )
    );
  }
}

If you really feel it's necessary to break those out into variables, keep 'em local to the computed method instead of manipulating this.start and this.end from within the computed method.

Computed methods, generally, aren't meant to do any setting .. when that is needed (and it doesn't appear to be here) there is a different syntax available to define setter and getter on a computed prop.

Now, this looks like this, but still, doesn't work.

axios.post('/api/booking/create', { 
                    carNumber: this.booking.carNumber,
                    carSize: this.booking.carSize,
                    carType: this.booking.carType,
                    carSubtype: this.booking.carSubtype,
                    carColor: this.booking.carColor,

                    name: this.booking.name,
                    socialId: this.booking.socialId,
                    email: this.booking.email,
                    phone: this.booking.phone,

                    dropOffDate: moment(this.selectedValue.start, "MM/DD/YYYY"),
                    dropOffTime: this.booking.dropOffTime,
                    pickUpDate: moment(this.selectedValue.end, "MM/DD/YYYY"),
                    pickUpTime: this.booking.pickUpTime,
                    flightNumber: this.booking.flightNumber,

                    dates: this.numberOfDays,
                    priceForDays: this.priceForDays,

                    totalPrice: this.price,
                    finalPrice: 100
                })

numberOfDays: function () {
        return Math.abs(moment(this.selectedValue.start).diff(moment(this.selectedValue.end), 'days'))
},

Do you need it to be a computed property? Are you using that computed value elsewhere, and if so is it working?

It's entirely possible and likely that moment is failing to parse the dates since you're not providing the format as you are when defining dropOffDate and pickUpDate in your post body.

also this is entirely the wrong place to define a variable... ;)

methods: {
        const val = this.numberOfDays;

If you don't need the computed prop elsewhere, why not just compute it directly when prepping the axios post body? Then, since presumably dropOffDate and pickUpDate are working you could instead do somethign like this...

// get rid of the computed prop altogether...

// method becomes:

methods: {
        createBooking() {

            const dropOffDate = moment(this.selectedValue.start, "MM/DD/YYYY");
            const pickUpDate = moment(this.selectedValue.end, "MM/DD/YYYY");

            axios.post('/api/booking/create', { 
                carNumber: this.booking.carNumber,
                carSize: this.booking.carSize,
                carType: this.booking.carType,
                carSubtype: this.booking.carSubtype,
                carColor: this.booking.carColor,
                name: this.booking.name,
                socialId: this.booking.socialId,
                email: this.booking.email,
                phone: this.booking.phone,

                dropOffDate,


                dropOffTime: this.booking.dropOffTime,


                pickUpDate,


                pickUpTime: this.booking.pickUpTime,
                flightNumber: this.booking.flightNumber,


                dates: Math.abs(dropOffDate.diff(pickUpDate, 'days')),


                priceForDays: this.priceForDays,
                totalPrice: this.price,
                finalPrice: 100
            })
            .catch(error => {
                error.response.data;
            })
            .then(function (response) {})
        }
    },

I added extra spacing so my changes stick out. If you have a variable of the name already, you can just reference that without having to assign it's value, thus the dropOffDate, and pickUpDate, in the post body now, since they're defined earlier, and then also used to set your dates value.

Assuming your date logic was sound in the first place, this should work

Yes I'm using numberOfDays in another component and in an​ invoice when a booking is created.

Ok, in that case, you probably need to specify the date format for moment to parse:

methods: {
  axios.post('/api/booking/create', { 

    // ignoring other parts for convenience

    days: this.numberOfDays,

  });
},

computed: {
  numberOfDays: function () {
    return Math.abs(
      moment(this.selectedValue.start, 'MM/DD/YYYY').diff(
        moment(this.selectedValue.end, 'MM/DD/YYYY'), 'days')
      )
    );
  }
}

But... it is working elsewhere? thats... weird.

Are you certain the issue is on the vue side? Assuming it's able to properly parse dates from this.selectedValue that logic should always yield a value between 0 and whatever the upper limit of range you allow to be selected is.

Could be passing a 0 and the server side code is seeing that as falsey maybe?

I think it's related to the selectedValue, it is not parsing correctly. I can see if I look in the Vue Devtools, that this.booking.dropOffDate is undefined. So selectedValue is not parsing correctly and that's why this is braking. Do you know if moment.js can parse end:Fri Aug 16 2019 00:00:00 GMT+0000 (Greenwich Mean Time) to simple 16/08/2019?

Solved: https://laracasts.com/discuss/channels/vue/pass-computed-prop-to-a-post-method?page=1#reply=528431

Moment can parse any date string, so long as you provide it the appropriate format as the second param ..

So for end:Fri Aug 16 2019 00:00:00 GMT+0000 (Greenwich Mean Time)

So long as they're always UTC, this would work to parse: moment(str.replace('end:', ''), 'ddd MMM D YYYY HH:mm:ss ZZ')

If you need to parse the timezone too you'll probably need the moment tz addon too but, that's the basic gist, you provide the string to parse, and the string defining the format