Vue 组件中的 Laravel CSRF 字段

2024-02-26

我想问一下如何在我的 vue 组件中添加 csrf_field() 。错误是

属性或方法“csrfToken”未在实例上定义,但在渲染期间引用。确保在数据选项中声明反应数据属性。

这是代码:

<script>
export default {
  name: 'create',
  data: function(){
    return {
        msg: ''
    }
  },
  props:['test']
}
</script>
<template>
  <div id="app">
    <form action="#" method="POST">
      {{csrfToken()}}
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <input type="text" id="location" class="form-control"> 
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" id="age" class="form-control"> 
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-default"> 
      </div>
    </form>
  </div>
</template>

正如我已经写过的here https://stackoverflow.com/questions/39938284/how-to-pass-laravel-csrf-token-value-to-vue/47715332,我只是建议将其放入您的 PHP 文件中:

<script>
    window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token()]); ?>
</script>

这样您就可以轻松地从 JS 部分(本例中为 Vue)导入 csrfToken。

此外,如果您将此代码插入 PHP 布局文件中,则可以通过应用程序的任何组件使用该令牌,因为window是一个JS全局变量。

来源:我的技巧来自this https://appdividend.com/2017/08/05/laravel-vuejs-tutorial/ post.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 组件中的 Laravel CSRF 字段 的相关文章

随机推荐

  • 如何使用 Thrust 计算 int2 数组的平均值

    我正在尝试计算包含点 x y 的某个数组的平均值 是否可以使用推力找到表示为 x y 点的平均点 我也可以将数组表示为thrust device vector
  • D3.js 结合条形图和折线图

    我想通过将条形图与折线图组合来创建多个系列图表 当我使用rangeBands 为了设置输出范围 该线从图表中第一个柱的开头开始绘制 并在最后一个柱的开头结束 我应该更改什么以使该线从第一个刻度线开始并在最后一个刻度线结束 var data
  • 使用模拟器进行条码扫描的 Windows Mobile 应用程序

    我想为 Motorolo MC 9190 G 手机开发简单的应用程序 它有内置的条形码扫描仪 我想扫描条形码并将其显示在消息框中 我没有手机 所以我必须在模拟器中测试它 当我在模拟器中部署代码时 它给出了 null 异常错误 我的代码是 我
  • 如何对ServiceStack进行单元测试?

    我喜欢 SS 但我在尝试对我的业务层进行单元测试时摸不着头脑 我是单元测试和模拟的新手 并且一直在阅读 NSubstitute 因为这看起来像是一个有趣的模拟层 我的文件结构大致如下 MainAppHostProject AppStart
  • 使用Python解析JSON数据

    我从 GitHub Webhook 服务收到一些数据 它包含有关存储库中最近提交的信息 我收到的字符串如下所示 payload ref refs heads master commits added author username myna
  • 如何检索 Pandas 数据框中的列数?

    如何以编程方式检索 pandas 数据框中的列数 我希望有这样的事情 df num columns Like so import pandas as pd df pd DataFrame pear 1 2 3 apple 2 3 4 ora
  • Docker:运行 html 文件的基本示例 dockerfile

    docker 和 dockerfile 是否有任何非常基本且仍然可行的示例来运行单个 html 文件并在 docker 的帮助下将其显示给其他人 要在 http 上提供 html 文件 您需要一个 Web 服务器 因此要做到这一点 您需要做
  • scipy.interpolate.Rbf 的意外结果

    我在使用 RBF 进行插值时遇到一些错误 这是一维的示例 我认为这与我的 y 值彼此之间的接近程度有关 有什么解决办法吗 import numpy as np from scipy interpolate import Rbf interp
  • 从雅虎财经获取 1 分钟柱线

    我正在尝试从雅虎财经下载 1 分钟的历史股票价格 包括当天和前一天的价格 Yahoo 就像 Google 支持最多 15 天的数据 使用以下 API 查询 http chartapi finance yahoo com instrument
  • 如何使用 Twitter API 批准关注者对受保护帐户的请求?

    The 友谊 创造 https dev twitter com docs api 1 post friendships create似乎是最接近的选项 但他们的文档没有明确提及这种情况 有人能够做到这一点吗 我收到了 Twitter 员工的
  • 为什么使用 for 循环而不是 while 循环? [复制]

    这个问题在这里已经有答案了 可能的重复 使用 for 循环还是 while 循环进行迭代 https stackoverflow com questions 99164 iterate with for loop or while loop
  • 如何在innerText 或nodeValue 之间进行选择?

    当我需要更改 span 元素中的文本时 我应该使用哪一个以及有什么区别 var spnDetailDisplay document getElementById spnDetailDisplay spnDetailDisplay inner
  • 没有外键关系的内联管理

    是否可以手动指定要在内联中显示的相关对象集 其中不存在外键关系 Parent class Diary models Model day models DateField activities models TextField Child c
  • FFMPEG读取关键帧

    我正在尝试编写一个 C 程序 该程序将使用 ffmpeg 从视频文件中读取关键帧 到目前为止 我设法使用所有框架av read frame你按顺序阅读的地方 一帧一帧 但我在使用时遇到一些问题av seek frame这 如果我是正确的 应
  • 如何在不使用 eval 的情况下动态包含 Perl 模块?

    我需要动态包含 Perl 模块 但如果可能的话 由于工作编码标准 我希望远离 eval 这有效 module My module eval use module 但我需要一种方法来做到这一点 而不需要eval如果可能的话 所有谷歌搜索都会导
  • 客户端发送 SOAP 请求并接收响应

    尝试创建一个 C 客户端 将开发为 Windows 服务 将 SOAP 请求发送到 Web 服务 并获取结果 由此question https stackoverflow com questions 1862965 sending and
  • C++ 中使用运算符 [] 重载区分读和写

    我有一个包含预测数组的安全类 预测是一个类 它只包含一个双精度数 我想允许更改双精度值 但只允许正值 当尝试读取双精度值时 如果该值未初始化 在我的代码中等于 1 则会抛出异常 我也有双运算符像这样的东西 class Prediction
  • SWITCH javascript 总是执行默认情况的问题

    嗯 我有这个麻烦 我一直在处理 但我就是无法让它工作 我有这个功能 function getDirections dir var img switch dir case 0 img N png break case 1 img NE png
  • 正则表达式匹配完整字符串

    我正在尝试为 301 创建一个正则表达式来帮助我识别 url site com abc 并重定向到site com xyz 我尝试过正则表达式 abc 它工作正常 但问题甚至是像这样的网址site com 123 sdas abc 213被
  • Vue 组件中的 Laravel CSRF 字段

    我想问一下如何在我的 vue 组件中添加 csrf field 错误是 属性或方法 csrfToken 未在实例上定义 但在渲染期间引用 确保在数据选项中声明反应数据属性 这是代码