alexpnet89
1221
4
Vue

Posting data to laravel app from vueJS

Posted 1 year ago by alexpnet89

Hi guys, can somebody help me? I'm finishing my first app with laravel + VueJS, but with so many doubts in the way.

Right now, i have one page where i generate the form dinamically, and need to send the data to laravel, but i have no idea how to.

this is the code of my form:

<template>
    <div>
        <div class="my-dynamic-form">
            <form class="form-horizontal">
                <div class="form-group" v-for="formItem in campos">

                    <label class="col-sm-2 control-label"
                           v-if="formItem.tipo_dado == 'Texto'">
                        {{formItem.nome}}
                    </label>

                    <div class="col-sm-8"
                         v-if="formItem.tipo_dado == 'Texto'">
                        <input type="text" class="form-control" v-model="formItem.valor">
                    </div>

                    <div class="col-sm-offset-2 col-sm-8"
                         v-if="formItem.tipo_dado == 'Boolean'">
                        <input type="checkbox" v-model="formItem.valor"> {{ formItem.nome }}
                    </div>

                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-8">
                        <button type="button"
                                class="btn btn-primary btn-block"
                                @click="submitForm()">Gravar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<style>

and this is my script:

<script>

    export default{
        props: ['campos'],
        data: function() {
            return {
                registros: {
                    id_atividade: '',
                    id_user: '',
                    id_tipo_registro: '',
                        registro_campos: [{
                            id_registro_campo: '',
                            valor: '',
                            campo: ''
                        }]
                }
            }
        },
        methods: {
            submitForm(formItem) {

                console.log(formItem);


            }
        }
    }
</script>

This is my store method on laravel:

public function store(Request $request)
    {

        foreach ($request->input('registros') as $key => $registro){

            $registroCriado = Registro::create([
                'data' => Carbon::now(),  //"2017-08-01",
                'id_atividade' => $registro['id_atividade'],
                'id_user' => $registro['id_user'],
                'id_tipo_registro' => $registro['id_tipo_registro']
            ]);

            foreach ($registro['registro_campos'] as $key => $registroCampo){

                RegistroCampo::create([
                    'id_registro' => $registroCriado->id,
                    'id_registro_campo' => $registroCampo['id_registro_campo'],
                    'valor' => $registroCampo['valor'],
                    'campo' => $registroCampo['campo']
                ]);
            }

        }

All i have to do is send my form to the laravel, where the data will be stored in the database.

How can i do that? Any Tutorials? I am on the right way?

Please sign in or create an account to participate in this conversation.