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

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

如果你正在使用带有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'
};