Question

我正在尝试构建表单并使用laravel vue将其发送到post后端。但那不起作用。我该怎么做才能改进它，以及如何放置csrf字段？

形式：

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Search people!</h4>
            </div>
            <div class="modal-body">
                <form method="POST" class="">
                    <div class="form-group">
                        <label for="city">City:</label>
                        <input type="text" class="form-control" v-model="football.city" id="city">
                    </div>
                    <button v-on:click.prevent="getFilterRequest()" class="btn btn-blue">Search</button>
                </form>
            </div>
        </div>
    </div>
</div>

Vue的：

<script>
    export default {
        props: [
            'user',
            'users'
        ],
        data: function () {
          return {
            usr: [],
            football: [], 
            }
        },
        mounted() {

        },
        methods: {
          getAvatarUrl()
          {
            return 'img/lock_thumb.jpg';
          },
          getFilterRequest()
          {
            return this.$http.post('/football/search', new FormData(this.$refs.myForm));
          }
        }
    }
</script>

错误：

未捕获的TypeError：无法读取属性＆＃39; post＆＃39;未定义的

Answer 1

在vue 2中使用laravel 5，laravel带有使用axios的预设。

<强> JS

import axios from 'axios'

//vue data
data : {
  football.city: ''
}


methods: {
    getFilterRequest() {
        axios['post']('/football/search', this.data)
            .then(response => console.log(response))
            .catch(error => console.log(error));
    }
}

Answer 2

我不使用vue-resource，但主体是相同的。 您需要将表单放在帖子中。为表单添加引用，然后创建一个FormData对象，就像这样......

<强>标记

<form method="POST" class="" ref="myForm">

<强> JS

return this.$http.post('/football/search', new FormData(this.$refs.myForm))

别忘了导入vue-resource，就像男人说的那样： - ）

如何在laravel中使用Vue.js发送表单？

2 个答案: