如何将 vue-google-maps placeInput 提交到服务器？答案

【问题标题】：How to submit vue-google-maps placeInput to server?如何将 vue-google-maps placeInput 提交到服务器？
【发布时间】：2017-05-23 03:48:13
【问题描述】：

我的申请中有一个表格。我还有一个使用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 属性不会添加到输入字段）：

如何将位置输入数据连同我的表单一起提交？

【问题讨论】：

这是现场直播吗？如果没有，能否显示生成的html？
使用生成的 html 的屏幕截图更新了 repo。它不是实时的，但代码仓库在 github 上：github.com/connor11528/laravel-5.3-app

标签： php laravel google-maps laravel-5 vue.js

【解决方案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>

【讨论】：

嘿，所以我编辑了这个问题。不幸的是，向组件添加名称属性不会级联到输入字段本身。我向 Vue 组件存储库添加了一个拉取请求以获取名称属性：github.com/GuillaumeLeclerc/vue-google-maps/pull/123
我对 Vue 不太熟悉，但我相信有一种方法可以在不是作为模板生成的输入上对其进行初始化。所以你应该能够创建自己的 html 输入并附加到它。

【解决方案2】：

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

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

和

methods: {
    onSubmit: function (event) {
      //You can ajax your form data + manually add your location-input from your component
    }
  }

这能解决你的问题吗？

【讨论】：