Level 1
Can you look at Telescope and see what the log says? Also I'm not sure if you mis-typed, but I don't believe this is your controller ;)
1 like
Jul 30, 2019
3
Level 14
500 (Internal Server Error)
Hi, I'm trying to create a form and using Vue and Axios and when I post I always get a 500. Any ideas?
Here is the controller
<template>
<div class="h-screen p-0 flex flex-col flex-no-wrap justify-center items-center">
<section class="w-full my-8" id="car-form" v-if="step === 1">
<div class="w-full">
<h2 class="font-bold text-white text-6xl text-center mb-12">Upplýsingar um bíl</h2>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" name="carNumber" placeholder="Bílnúmer" required v-model="booking.carNumber"> <!-- v-on:blur="getCarInfo()" -->
</div>
<div class="inline-block relative w-full md:w-1/2 px-3 mb-6 md:mb-0">
<select class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model="booking.carSize" name="carSize">
<option selected disabled>Bíltegund</option>
<option value="folksbill">Fólksbíll</option>
<option value="jepplingur">Jepplingur</option>
<option value="jeppi">Jeppi</option>
<option value="yfirstærð">Yfirstærð</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-4 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Tegund" name="carType" required v-model="booking.carType">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Undirtegund" name="carSubtype" required v-model="booking.carSubtype">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Litur" name="carColor" required v-model="booking.carColor">
</div>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full px-3 mb-6 md:mb-0 float-right">
<button @click.prevent="next()" class="float-right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zM256 40c118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216zm12.5 92.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H140c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0z"/></svg>
</button>
</div>
</div>
</section>
<section class="w-full my-8" id="about-form" v-if="step === 2">
<div class="w-full">
<h2 class="font-bold text-white text-6xl text-center mb-12">Upplýsingar um þig</h2>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Kennitala" name="socialId" required v-model="booking.socialId">
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Nafn" name="name" required v-model="booking.name">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="email" placeholder="Netfang" name="email" required v-model="booking.email">
</div>
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Símanúmer" name="phone" required v-model="booking.phone">
</div>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full px-3 mb-6 md:mb-0">
<ul class="flex float-right">
<li class="pr-4">
<button @click.prevent="prev()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5l-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z"/></svg>
</button>
</li>
<li>
<button @click.prevent="next()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zM256 40c118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216zm12.5 92.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H140c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0z"/></svg>
</button>
</li>
</ul>
</div>
</div>
</section>
<section class="w-full my-8" id="arrival-form" v-if="step === 3">
<div class="w-full">
<h2 class="font-bold text-white text-6xl text-center mb-12">Hvenær kemuru aftur?</h2>
</div>
<vc-date-picker
mode="range"
:value="null"
:min-date='new Date()'
color="orange"
locale="is"
is-inline
is-expanded
:columns="$screens({ default: 1, lg: 2 })"
v-model="booking.date"
name="date"
:dayfocusout="calculateDates"
/>
<div class="flex flex-wrap -mx-3 my-6">
<div class="inline-block relative w-full md:w-1/3 px-3 mb-6 md:mb-0">
<select class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model="booking.dropOffTime" name="dropOffTime">
<option selected disabled>Brottfaratími</option>
<option>00:00</option>
<option>00:15</option>
<option>00:30</option>
<option>00:45</option>
<option>01:00</option>
<option>01:15</option>
<option>01:30</option>
<option>01:45</option>
<option>02:00</option>
<option>02:15</option>
<option>02:30</option>
<option>02:45</option>
<option>03:00</option>
<option>03:15</option>
<option>03:30</option>
<option>03:45</option>
<option>04:00</option>
<option>04:15</option>
<option>04:30</option>
<option>04:45</option>
<option>05:00</option>
<option>05:15</option>
<option>05:30</option>
<option>05:45</option>
<option>06:00</option>
<option>06:15</option>
<option>06:30</option>
<option>06:45</option>
<option>07:00</option>
<option>07:15</option>
<option>07:30</option>
<option>07:45</option>
<option>08:00</option>
<option>08:15</option>
<option>08:30</option>
<option>08:45</option>
<option>09:00</option>
<option>09:15</option>
<option>09:30</option>
<option>09:45</option>
<option>10:00</option>
<option>10:15</option>
<option>10:30</option>
<option>10:45</option>
<option>11:00</option>
<option>11:15</option>
<option>11:30</option>
<option>11:45</option>
<option>12:00</option>
<option>12:15</option>
<option>12:30</option>
<option>12:45</option>
<option>13:00</option>
<option>13:15</option>
<option>13:30</option>
<option>13:45</option>
<option>14:00</option>
<option>14:15</option>
<option>14:30</option>
<option>14:45</option>
<option>15:00</option>
<option>15:15</option>
<option>15:30</option>
<option>15:45</option>
<option>16:00</option>
<option>16:15</option>
<option>16:30</option>
<option>16:45</option>
<option>17:00</option>
<option>17:15</option>
<option>17:30</option>
<option>17:45</option>
<option>18:00</option>
<option>18:15</option>
<option>18:30</option>
<option>18:45</option>
<option>19:00</option>
<option>19:15</option>
<option>19:30</option>
<option>19:45</option>
<option>20:00</option>
<option>20:15</option>
<option>20:30</option>
<option>20:45</option>
<option>21:00</option>
<option>21:15</option>
<option>21:30</option>
<option>21:45</option>
<option>22:00</option>
<option>22:15</option>
<option>22:30</option>
<option>22:45</option>
<option>23:00</option>
<option>23:15</option>
<option>23:30</option>
<option>23:45</option>-
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-4 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
<div class="inline-block relative w-full md:w-1/3 px-3 mb-6 md:mb-0">
<select class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" v-model="booking.pickUpTime" name="pickUpTime">
<option selected disabled>Komutími</option>
<option>00:00</option>
<option>00:15</option>
<option>00:30</option>
<option>00:45</option>
<option>01:00</option>
<option>01:15</option>
<option>01:30</option>
<option>01:45</option>
<option>02:00</option>
<option>02:15</option>
<option>02:30</option>
<option>02:45</option>
<option>03:00</option>
<option>03:15</option>
<option>03:30</option>
<option>03:45</option>
<option>04:00</option>
<option>04:15</option>
<option>04:30</option>
<option>04:45</option>
<option>05:00</option>
<option>05:15</option>
<option>05:30</option>
<option>05:45</option>
<option>06:00</option>
<option>06:15</option>
<option>06:30</option>
<option>06:45</option>
<option>07:00</option>
<option>07:15</option>
<option>07:30</option>
<option>07:45</option>
<option>08:00</option>
<option>08:15</option>
<option>08:30</option>
<option>08:45</option>
<option>09:00</option>
<option>09:15</option>
<option>09:30</option>
<option>09:45</option>
<option>10:00</option>
<option>10:15</option>
<option>10:30</option>
<option>10:45</option>
<option>11:00</option>
<option>11:15</option>
<option>11:30</option>
<option>11:45</option>
<option>12:00</option>
<option>12:15</option>
<option>12:30</option>
<option>12:45</option>
<option>13:00</option>
<option>13:15</option>
<option>13:30</option>
<option>13:45</option>
<option>14:00</option>
<option>14:15</option>
<option>14:30</option>
<option>14:45</option>
<option>15:00</option>
<option>15:15</option>
<option>15:30</option>
<option>15:45</option>
<option>16:00</option>
<option>16:15</option>
<option>16:30</option>
<option>16:45</option>
<option>17:00</option>
<option>17:15</option>
<option>17:30</option>
<option>17:45</option>
<option>18:00</option>
<option>18:15</option>
<option>18:30</option>
<option>18:45</option>
<option>19:00</option>
<option>19:15</option>
<option>19:30</option>
<option>19:45</option>
<option>20:00</option>
<option>20:15</option>
<option>20:30</option>
<option>20:45</option>
<option>21:00</option>
<option>21:15</option>
<option>21:30</option>
<option>21:45</option>
<option>22:00</option>
<option>22:15</option>
<option>22:30</option>
<option>22:45</option>
<option>23:00</option>
<option>23:15</option>
<option>23:30</option>
<option>23:45</option>-
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-4 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="text" placeholder="Flugnúmer" name="flightNumber" v-model="booking.flightNumber">
</div>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full px-3 mb-6 md:mb-0">
<ul class="flex float-right">
<li class="pr-4">
<button @click.prevent="prev()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5l-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z"/></svg>
</button>
</li>
<li>
<button @click.prevent="next()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zM256 40c118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216zm12.5 92.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H140c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0z"/></svg>
</button>
</li>
</ul>
</div>
</div>
</section>
<section class="w-full my-8" id="service-form" v-if="step === 4">
<div class="w-full">
<h2 class="font-bold text-white text-6xl text-center">Klárum dæmið</h2>
<p class="font-light text-white text-lg text-center italic mb-12">Hvaða þjónustu má bjóða þér?</p>
</div>
<div class="flex flex-wrap -mx-3">
<label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
<input class="mr-2 leading-tight" type="checkbox" :value="11500" @change="updatePrice">
<span class="font-normal text-white">
Tjöruþvottur + alþrif að innan
</span>
</label>
<label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
<input class="mr-2 leading-tight" type="checkbox" :value="16000" @change="updatePrice">
<span class="font-normal text-white">
Bón + alþrif að innan
</span>
</label>
<label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
<input class="mr-2 leading-tight" type="checkbox" :value="6000" @change="updatePrice">
<span class="font-normal text-white">
Umfelgun
</span>
</label>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
<input class="mr-2 leading-tight" type="checkbox" :value="9000" @change="updatePrice">
<span class="font-normal text-white">
Olíuskipti
</span>
</label>
<label class="w-full md:w-1/3 px-3 mb-6 md:mb-0 block">
<input class="mr-2 leading-tight" type="checkbox" value="10000" @change="updatePrice">
<span class="font-normal text-white">
Rúðuvökvi
</span>
</label>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-1/2">
<h3 class="text-white uppercase font-regular text-xl"><span v-text="price"></span> kr.</h3>
</div>
<div class="w-1/2">
<ul class="flex float-right">
<li class="pr-4 self-center">
<button @click.prevent="prev()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="30px" height="30px" fill="#fff"><path d="M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zM256 472c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm-12.5-92.5l-115.1-115c-4.7-4.7-4.7-12.3 0-17l115.1-115c4.7-4.7 12.3-4.7 17 0l6.9 6.9c4.7 4.7 4.7 12.5-.2 17.1L181.7 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H181.7l85.6 82.5c4.8 4.7 4.9 12.4.2 17.1l-6.9 6.9c-4.8 4.7-12.4 4.7-17.1 0z"/></svg>
</button>
</li>
<li>
<button @click="createBooking" class="bg-orange-500 text-white font-bold text-center px-12 py-2 rounded-full ">
Borga
</button>
</li>
</ul>
</div>
</div>
</section>
<!-- <button @click.prevent="showPaymentGateway = true" class="bg-orange-500 text-white font-bold text-center px-12 py-2 rounded-full ">
Borga
</button> -->
<!-- <payment v-if="showPaymentGateway"></payment> -->
</div>
</template>
<script>
import axios from 'axios';
import payment from './Payment.vue';
export default {
components: { payment },
data() {
return {
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: "Brottfaratími",
dropOffTime: null,
pickUpTime: "Komutími",
flightNumber: null,
},
price: 5000,
showPaymentGateway: false
}
},
methods: {
getCarInfo() {
axios.get('https://www.samgongustofa.is/umferd/okutaeki/okutaekjaskra/uppfletting?vq=' + this.booking.carNumber)
.then(response => console.log(response));
},
updatePrice() {
return this.price = parseInt(this.value) + parseInt(this.price);
},
prev() {
this.step--;
},
next() {
this.step++;
},
createBooking() {
axios.post('/api/booking/create', {
carNumber: this.carNumber,
carSize: this.carSize,
carType: this.carType,
carSubtype: this.carSubtype,
carColor: this.carColor,
name: this.name,
socialId: this.socialId,
email: this.email,
phone: this.phone,
date: this.date,
dropOffTime: this.dropOffTime,
pickUpTime: this.pickUpTime,
flightNumber: this.flightNumber,
})
.catch(error => {
error.response.data;
})
.then(function (response) { })
},
calculateDates() {
console.log('Halló heimur!')
}
},
}
</script>
Level 67
Usually you can see the error message by looking at the response from the ajax request in your browser's network tab in the developer tools. It would normally show in the browser as an html error page, but you retrieved it via ajax so the error is returned via ajax. This is assuming this is a development box, and not production.
1 like
Level 14
Figured it out :) Thanks
Please or to participate in this conversation.