Question

我是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>

我该如何解决这个问题？

Answer 1

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

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

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

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

1 个答案: