How to submit vue-google-maps placeInput to server? - php

Question

I have a form in my application. I also have a view component that creates an input field using vue-google-maps.
I use this component within my but there is no name attribute so my server does not recognize a submitted value.
How can I submit the data from the input field to my server? I am using Laravel 5.3.
<template>
<place-input
:place.sync="placeInput.place"
:types.sync="placeInput.types"
:component-restrictions.sync="placeInput.restrictions"
class='form-control'
label='Location: '
name='location'
></place-input>
<pre>{{ placeInput.place | json }}</pre>
</template>
<script>
import { PlaceInput, Map } from 'vue-google-maps'
export default {
data() {
return {
placeInput: {
place: {
name: ''
},
types: [],
restrictions: {'country': 'usa'}
}
}
},
components: {
PlaceInput
},
ready() {
}
}
</script>
<style>
label { display: block; }
</style>
My Laravel form looks like this:
{!! Form::open(['action' => 'CandidateController#store']) !!}
<div class='form-group'>
{!! Form::label('email', 'Email:') !!}
{!! Form::email('email', null, ['class' => 'form-control']) !!}
</div>
<div class='form-group'>
{!! Form::label('phone', 'Phone:') !!}
{!! Form::text('phone', null, ['class' => 'form-control']) !!}
</div>
<div class='form-group'>
<location-input></location-input>
</div>
{!! Form::close() !!}
Where location-input is the vue-google-maps component that generates an input.
When I submit the form and dump the data to the screen no location data is available!
on server
$input = Request::all();
dd($input);
The raw input looks like this (the name attribute on the component does not add to the input field):
How do I submit the location-input data along with my form?

Answer 1

I'd still like to see your generated html but I think the problem is that there's no name attribute on the input you're creating. Thus, it's not part of the posted data.
<place-input
:place.sync="placeInput.place"
:types.sync="placeInput.types"
:component-restrictions.sync="placeInput.restrictions"
class='form-control'
name='location'
label='Location: '
></place-input>

Answer 2

I am not familiar with vue but what about sending your form through vue and adding manually adding the location to the ajax request? Something like
<form v-on:submit.prevent="onSubmit">
//Your form
</form>
and
methods: {
onSubmit: function (event) {
//You can ajax your form data + manually add your location-input from your component
}
}
Would that solve your problem?