从 Vue 组件取回数据答案

【问题标题】：Get Data back from Vue Component从 Vue 组件取回数据
【发布时间】：2021-06-15 11:54:05
【问题描述】：

是否可以从 vue 组件中取回数据？

Laravel Blade.php 代码：

...
<div>
<component1></component1>
</div>
...

在component1 中是一个选择框，我需要在blade.php 中（仅选定的项目/值）

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

vue 组件在浏览器中呈现时仍然是有效的 HTML。如果您确保您的组件被包装在表单元素中并且具有有效的输入元素，并且可以提交表单，那么 PHP 端点可以毫无问题地使用表单的数据。它可能看起来像这样：

布局/视图：

<form method="post" action="/blade.php">
  <component1></component1>
  <button type="submit">Submit form</button>
</form>

组件（<component1/>）：

<fieldset>
  <input type="checkbox" name="my_option" id="my_option">
  <label for="my_option">I have checked this checkbox</label>
</fieldset>

PHP 脚本 (blade.php)：

echo $_POST["my_option"] // if checked, should print "on"

如果您正在寻找以 JavaScript 为中心的方法，您可能希望序列化表单并获取端点；它可能看起来像这样：

import serialize from 'form-serialize';

const formData = serialize(form)
fetch(form.action, { method: 'POST' }, body: JSON.stringify(formData) })
  .then(response => {
    // update page with happy flow
  })
  .catch(error => {
    // update page with unhappy flow
  })

使用适当的 HTML 语义从可访问和标准化的基础上构建可能会导致更易于理解的代码和更容易的改进。祝你好运！

（编辑：如果您需要一个完整、有效的解决方案来解决您的问题，您应该发布更多来自 Vue 应用程序和 PHP 脚本的代码。）

【讨论】：