Как отправить Laravel VueJS Dynami c данных формы? - PullRequest
Новая
       6

Как отправить Laravel VueJS Dynami c данных формы?

0 голосов
/ 02 апреля 2020

Я новичок в Vue. js. Я пытаюсь создать динамическую форму c (только определенную часть динамической формы c.). Пользователь может иметь несколько поручителей. Таким образом, я сделал Гарант формы Dynami c с 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>

Как мне решить эту проблему?

1 Ответ

0 голосов
/ 02 апреля 2020

В PHP значения с одинаковым значением атрибута name будут перезаписаны. (См. Раздел «Как получить все результаты из нескольких выбранных тегов HTML?» здесь ).

Вы можете создавать массивы значений, добавляя скобку к имени , Например, если вы сделали name для ввода "name" name[], name будет массивом имен в PHP.

В вашем случае вы можете использовать этот формат: name="guarantors[][name]". Таким образом, вы получите массив в PHP под ключом guarantors (например, $request->guarantors), и каждое из значений в guarantors будет массивом со значениями name, email, et c.

...