如何正确地将数据从 vue 组件发布到 laravel 控制器

Posted 2023-03-14

【中文标题】如何正确地将数据从 vue 组件发布到 laravel 控制器

【英文标题】：How to properly post data from vue component to laravel controller

【发布时间】：2021-10-14 09:45:22

【问题描述】：

我正在使用 laravel、blade 和 Vue.js。所以我想要实现的是从 Vue.js 组件发送一个道具以及表单中的所有其他内容。 问题是表单的主要部分在刀片中，但道具在Vue组件中（道具是一个对象数组，不存储在输入字段中，所以提交表单时我无法获取数据） .

我知道我可以通过 axios 发送数组，但据我所知，我需要将整个表单放入 Vue 组件中 - 我不想这样做，因为我有 2在表单中分离 Vue 组件。

我要问的是我能否以某种方式使组件在提交表单时像 html 输入字段的值一样“返回”数组。 关键是基本的表单输入将保留在刀片文件中，而自定义 vue 组件将保留在其单独的文件中。

我问这个是因为将整个表单复制到 vue 组件中对我来说似乎是非常错误的——我也可能是非常错误的 :)

感谢您提前提供任何信息！

【参考方案1】：

我不明白为什么将表单放在 Vue 组件中是错误的，应该完全没问题，您将对数据有更多的控制权。

也就是说，如果您不想这样做，您可以捕获表单提交事件并提取表单数据，然后注入您的 Vue 组件并发出请求。示例：

<form id="myForm">
...
</form>

然后在你的 Vue.js 挂载钩子中：

mounted() 
  const form = document.body.querySelector('#myForm')
  form.addEventListener('submit', function(e) 
    e.preventDefault();
    // Here you could query the inputs you need and extract the data you need
  );
)