如何提交 Laravel VueJS 动态表单数据？答案

【问题标题】：How to submit Laravel VueJS dynamic form data?如何提交 Laravel VueJS 动态表单数据？
【发布时间】：2020-04-02 12:36:08
【问题描述】：

我是 Vue.js 的新手。我正在尝试使表单动态化（仅动态化表单的某个部分。）。一个用户可以有多个担保人。所以我用 VueJS 制作了动态的担保人表格。当我提交表单并返回请求时，我只看到最后一个数组。它始终是最后一个数组，所有其他数组都丢失了。

这是刀片文件。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('css/app.css')}}">

    <title>Laravel</title>


</head>

<body>
    <div id="app">

        <div class="container pt-5">

            <form action="{{ route('submit.store')}}" method="post">
                @csrf

                <div class="card-body">
                    <h4 class="card-title">User Detail</h4>


                    <input type="text" class="form-control mb-1" name="user_name" id="user_name" placeholder="Name" />

                    <input type="email" class="form-control mb-1" name="user_email" id="user_email"
                        placeholder="Email" />

                    <textarea name="about" class="form-control" id="about" cols="30" rows="10"
                        placeholder="About"></textarea>

                </div>

                <dynamic-form></dynamic-form>



            </form>

        </div>

    </div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>

这就是 VueComponent 的外观。

<template>
  <div>
      <button class="btn btn-success mb-3" @click.prevent="addNewUser">Add User</button>

      <div class="card mb-3" v-for="(user, index) in users" :key="index">

          <div class="card-body">
              <span class="float-right" style="cursor:pointer" @click.prevent="removeForm(index)" >X</span>
              <h4 class="card-title">Guarantor No: {{ index }}</h4>


                <input type="text" class="form-control mb-1" name="name" id="name" placeholder="Name" v-model="user.name" />

                <input type="email" class="form-control mb-1" name="email" id="email" placeholder="Email" v-model="user.email"/>

                <textarea name="about" class="form-control" id="about" cols="30" rows="10" placeholder="About" v-model="user.about"></textarea>

          </div>

      </div>

      <input type="submit" class="btn btn-primary" value="submit">



  </div>
</template>

<script>
export default {

    name: 'dynamic-form',

    data() {
        return{
            users: [
                {
                    name: '',
                    email: '',
                    about: ''

                }
            ]

        }
    },

    methods: {
          addNewUser: function() {
              this.users.push({
                  name: '',
                  email: '',
                  about: ''

              });
          },
          removeForm: function(index) {
              this.users.splice(index, 1);
          }
    }

}
</script>

我该如何解决这个问题？

【问题讨论】：

为什么不在Vue组件中使用完整的表单？
您好，数据库中还有一些用于构造表单的动态数据。为简单起见，我已经从控制器传递了数据，例如这里没有包含的客户端级别。
你可以使用 vue props 传递控制器数据。此外，您可以从 ajax 请求中检索数据。我认为这是管理数据的最简单方法。

标签： laravel vue.js vuejs2 vue-component

【解决方案1】：

在 PHP 中，具有相同 name 属性值的值将被覆盖。（请参阅“如何从选择多个 HTML 标记中获取所有结果？”部分 here）。

您可以通过在名称中添加括号来创建值数组。例如，如果您将“名称”输入的name 设为name[]，则name 将是PHP 中的名称数组。

在您的情况下，您可以使用以下格式：name="guarantors[][name]"。这样，您将在 PHP 中以 guarantors 键（例如 $request->guarantors）获得一个数组，guarantors 中的每个值都将是一个包含值 name、email 等的数组。

【讨论】：