Question

我有一个包含表单的vue模板：

<form id="logout-form" :action="href" method="POST" style="display: none;">
        {{ csrf_field() }}
</form>

在laravel中，表单必须定义csrf_field（）。但是在vue组件中，语句{{ csrf_field() }}意味着我的vue实例中有一个名为csrf_field的方法，我正在调用它。

如何在这种情况下添加csrf_field？

Answer 1

如果您的标题（视图）的元标记中有令牌

<meta name="csrf-token" content="{{ csrf_token() }}">

您可以使用

访问令牌

data() {
        return {
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
}

在表单中添加一个隐藏的输入字段，并将csrf属性绑定到这样的值：

<form id="logout-form" :action="href" method="POST" style="display: none;">
    <input type="hidden" name="_token" :value="csrf">
</form>

Answer 2

这就是我使用它的方式：

{!! csrf_field() !!}

把它放在你的表格中。

在您的vue脚本中，您可以简单地

methods: {
                submitForm: function(e) {

                  var form = e.target || e.srcElement;
                  var action = form.action;

获取表单和他的操作，然后数据值将是：

data: $(form).serialize()

这对我来说非常有效，并且完全没有错误。

Answer 3

您可以使用以下软件包：npm install vue-laravel-csrf

用法：<form v-csrf-token>

Answer 4

如果你正在使用带有Vue2的axios来处理你的ajax请求，你可以添加以下内容（通常在你的bootstrap.js文件中）：

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
};

如何在vue模板中引用laravel csrf字段

4 个答案: