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

我有一个vue模板，其中包含一个表单：

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

{{csrf_field（）}}

在laravel中，表单必须定义csrf_字段（）。但是在vue组件中，语句

{{csrf_field（）}

意味着我在vue实例中有一个名为

csrf_field

的方法，我正在调用它

---

在这种情况下，如何添加csrf_字段？

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

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

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

我就是这样使用它的：

{!! csrf_field() !!}

把它写在你的表格里

在vue脚本中，您可以

methods: {
                submitForm: function(e) {

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

获取表单及其操作，然后数据值将为：

data: $(form).serialize()

---

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

如果您使用axios with Vue2处理ajax请求，您只需添加以下内容（通常在bootstrap.js文件中）：

---

您可以使用此软件包：

npm安装vue laravel csrf

---

用法：

您可以将CSRF令牌作为头

头['X-CSRF-token']

发送。还可以将其存储到应用程序的元标记中，稍后只需使用

文档.querySelector

获取它。我使用了

文档.head.querySelector（'meta[name=“CSRF-token”]）。content

来获取CSRF数据并立即工作！非常感谢。Axios已默认提供此功能。如果您正在使用axios并添加此代码段，那么您将通过复制加密的csrf令牌cookie来中断通话。

methods: {
                submitForm: function(e) {

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

data: $(form).serialize()

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