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

【问题标题】：How to send form using Vue.js in laravel?如何在 laravel 中使用 Vue.js 发送表单？
【发布时间】：2018-03-14 08:30:15
【问题描述】：

我正在尝试使用post vue 构建表单并将其发送到laravel 后端。但这行不通。我可以做些什么来改进它，以及如何放置 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>

还有错误：

未捕获的类型错误：无法读取未定义的属性“帖子”

【问题讨论】：

你导入vue-resource了吗？

标签： javascript php laravel vue.js

【解决方案1】：

在带有 laravel 5 的 vue 2 中，laravel 使用 axios 对此进行了预设。

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));
    }
}

【讨论】：

【解决方案2】：

我不使用vue-resource，但是principal是一样的。 你需要把你的表单放在你的帖子中。给你的表单一个引用，然后创建一个 FormData 对象，像这样......

标记

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

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

别忘了导入 vue-resource，就像那个人说的 :-)

【讨论】：

好的，这就是进展。 F12。查看网络选项卡。检查您是否点击了所需的 URL，并且您的表单数据正在发送。