Question

我的申请表中有一张表格。我还有一个使用vue-google-maps创建输入字段的视图组件。

我在我的内部使用此组件，但没有名称属性，因此我的服务器无法识别提交的值。

如何将输入字段中的数据提交到我的服务器？我使用的是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>

我的Laravel表格如下：

{!! 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() !!}

其中location-input是生成输入的vue-google-maps组件。

当我提交表单并将数据转储到屏幕时，没有可用的位置数据！

服务器上的

$input = Request::all();
dd($input);

原始输入如下所示（组件上的name属性不会添加到输入字段）：

如何提交位置输入数据以及表单？

Answer 1

我仍然希望看到你生成的HTML，但我认为问题是你正在创建的输入没有name属性。因此，它不是发布数据的一部分。

<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

我不熟悉vue但是如何通过vue发送表单并手动添加位置到ajax请求呢？像

这样的东西

Query: Give me tasks of A, 12. 
Output: X,Z

和

<form v-on:submit.prevent="onSubmit">
//Your form
</form>

这会解决你的问题吗？

如何将vue-google-maps placeInput提交给服务器？

2 个答案: