使用ajax在Vue.js中提交表单

Question

我真的很困惑我将如何使用Vue.js和vue-resource提交一个使用响应填充div的ajax请求的表单。

我用js / jQuery从项目到项目这样做：

刀片中的视图

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
{!! Form::close() !!}

JS / jQuery的

var $searchForm = $('#searchForm');
var $searchResult = $('#searchResult');

$searchForm.submit(function(e) {
    e.preventDefault() ;

    $.get(
        $searchForm.attr('action'),
        $searchForm.serialize(),
        function(data) {
            $searchResult.html(data['status']);
        }
    );
});

到目前为止我在Vue.js做过/尝试过的事情：

刀片中的视图

{!! Form::open(['route' => 'formRoute', 'id' => 'searchForm', 'class' => 'form-inline']) !!}
    <div class="form-group">
        <input type="text" name="id" class="form-control" placeholder="id" required="required">
    </div>
    <button type="submit" class="btn btn-default" v-on="click: search">Search</button>
{!! Form::close() !!}

VUE / JS

    Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

    new Vue({
        el: '#someId',

        data: {

        },

        methods: {
            search: function(e) {
                e.preventDefault();

                var req = this.$http.get(
                    // ???, // url
                    // ???, // data
                    function (data, status, request) {
                        console.log(data);
                    }
                );
            }
        }
    });

我想知道在处理响应时是否可以使用组件将响应数据输出到div？

只是总结一切：

1. 如何使用vue js和vue-resource而不是通常的jQuery方式提交表单？
2. 使用ajax的响应，如何使用组件将数据输出到div中？

对此有任何帮助将非常感谢，谢谢。

Answer 1

1. 在文本输入上添加v-model="id"

2. 然后将其添加到您的数据对象

    new Vue({ el: '#someId', data: { id: '' }, methods: { search: function(e) { e.preventDefault(); var req = this.$http.get( '/api/search?id=' + this.id, function (data, status, request) { console.log(data); } ); } } }); 

3. 最好删除v-on="click: search"并在表单标记上添加v-on="submit: search" 。

4. 您应该在表单上添加method="GET" 。
5. 确保你的html标记中有#someId 。

Answer 2

为了从输入中获取值，您必须使用v-model指令

1. Blade View

<div id="app">
<form v-on="submit: search">
    <div class="form-group">
        <input type="text" v-model="id" class="form-control" placeholder="id" required="required">
    </div>

    <input type="submit" class="btn btn-default" value="Search">
</form>
</div>

<script type="text/javascript">

// get route url with blade 
var url = "{{route('formRoute')}}";

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');


var app = new Vue({
    el: '#app',
    data: {
        id: '',
        response: null
    },
    methods: {
        search: function(event) {
            event.preventDefault();

            var payload = {id: this.id};

            // send get request
            this.$http.get(url, payload, function (data, status, request) {

            // set data on vm
            this.response = data;

            }).error(function (data, status, request) {
                // handle error
            });
        }
    }
});
</script>

如果您想将数据传递给组件，请使用“props”查看文档以获取更多信息

http://vuejs.org/guide/components.html#Passing_Data_with_Props

如果你想一起使用laravel和vuejs，那么结账

https://laracasts.com/series/learning-vuejs

我希望这对你有所帮助！

Answer 3

我使用这种方法，就像一个魅力：

event.preventDefault();

let formData = new FormData(event.target);

formData.forEach((key, value) => console.log(value, key));