Problems with CRUD using Laravel and Vue.js

Question

I've recently start using vue with laravel.

I've build a blade view in a on going project and use a vue template on it, i can see everything normaly but, when the page loads i receive: "[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed." when i try to save, i get 422 and 500 errors.

Also this will be a multi-page app.

I've already tryied giving the type for the script tag in the blade, change the script tag for section tag, both without success. As for the save, i log console my data in the template and all the data was there, as i was expecting but, for some reason, this data is going with some error to the controller, honestly, i've been for two weeks trying to solve this, i rewrote my code a lot of times and still didn't figure. Can someone please help me o rgive some ideias?

Follow the code:

That's the blade file:

@extends('portal.template')

@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url('/portal-cambos') }}">Portal Cambos</a></li>
        <li class="breadcrumb-item"><a href="{{ url('/portal-cambos/tecelagem') }}">Tecelagem</a></li>
        <li class="breadcrumb-item active">Manuteção</li>
        <li class=" ml-auto">
            <button type="button" class="btn btn-secondary btn-sm" onclick="goBack()">
                <i class="fa fa-reply"></i> Voltar
            </button>
        </li>
    </ol>

    <div id="app">
        <index rotaadd="tecelagem/manutencao/"></index>
    </div>

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

The main vue component:

<template>
    <div class="tec-manut-pages">
        <PageTitle main="Manutenções Tecelagem" />
        <div class="tec-manut-pages-tabs">
            <b-card no-body>
                <b-tabs pills card>
                    <b-tab title="Máquinas com Manutençao Próxima" active>
                        Manutenções Próximas
                    </b-tab>
                    <b-tab title="Tipos de Manutenção">
                        <manutencao-tipos
                                rotaadd="manutencao/tipos/"
                                rotasalvar="manutencao/tipos/salvar/"/>
                    </b-tab>
                    <b-tab title="Cadastro de Manutenções">
                        Cadastro de Manutenções
                    </b-tab>
                    <b-tab title="Relatórios">
                        Relatórios
                    </b-tab>
                </b-tabs>
            </b-card>
        </div>
    </div>
</template>

<script>
    import PageTitle from '../../PageTitle'
    import ManutencaoTipos from "./manutencaoTipos";

    export default {
        name: "index",
        components: {PageTitle, ManutencaoTipos}
    }
</script>

<style scoped>

</style>

The second vue component:

<template>
    <div class="tec-manu-tipo" id="tec-manu-tipo">
        <b-form>
            <b-row>
                <b-col md="4" sm="12">
                    <b-form-group label="Tipo: " label-for="tipo">
                        <b-form-select id="tipo" v-model="type.tipo" :options="options" :readonly="mode === 'remove'"></b-form-select>
                    </b-form-group>
                </b-col>

                <b-col md="4" sm="12">
                    <b-form-group label="Manutenção: " label-for="manutencao">
                        <b-form-input id="manutencao" v-model="type.manutencao" placeholder="Informe o nome da manutenção..." :readonly="mode === 'remove'" />
                    </b-form-group>
                </b-col>

                <b-col md="4" sm="12">
                    <b-form-group label="Período: " label-for="periodo">
                        <b-form-input id="manutencao" v-model="type.periodo" placeholder="Informe o período da manutenção em dias..." :readonly="mode === 'remove'" />
                    </b-form-group>
                </b-col>
            </b-row>

            <b-row>
                <b-col xs="12">
                    <b-button variant="primary" v-if="mode === 'save'" @click="save">Salvar</b-button>
                    <b-button variant="danger" v-if="mode === 'remove'" @click="remove">Excluir</b-button>
                    <b-button class="ml-2" @click="reset">Cancelar</b-button>
                </b-col>
            </b-row>
        </b-form>
        <hr>
        <b-table hover striped>
            <template slot="actions">
                <b-button variant="warning" class="mr-2">
                    <i class="fa fa-pencil"></i>
                </b-button>

                <b-button variant="danger">
                    <i class="fa fa-trash"></i>
                </b-button>
            </template>
        </b-table>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "manutencaoTipos",
        props:['rotaadd', 'rotasalvar', 'nomes'],
        data() {
            return {
                mode: 'save',
                type: {
                    tipo: '',
                    manutencao: '',
                    periodo: ''
                },
                tipos: [],
                options: [
                    {value: null, text: 'Escolha o Tipo...'},
                    {value: '0', text: 'Corretiva'},
                    {value: '1', text: 'Preventiva'},
                    {value: '2', text: 'Limpeza'}
                ]
            }
        },
        methods:{
            reset(){
                this.mode = 'save'
                this.type = {}
                this.loadTypes()
            },
            save(){
                //console.log(this.tipo)
                axios.post(this.rotasalvar, this.type)
                    .then((res) => {
                        window.location.href ='http://127.0.0.1:8000/portal-cambos/tecelagem/manutencao';
                    }).catch((err) => {
                    console.error(err)
                });
            }
        }
    }
</script>

<style scoped>

</style>

app.js:

require('./bootstrap');
window.Vue = require('vue');
window.BootstrapVue = require('bootstrap-vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios = require('axios').default;

Vue.use(BootstrapVue);

//let AppIndex= require('./components/tecelagem/manutencao/index.vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('example', require('./components/Example.vue').default);
Vue.component('add-produtos', require('./components/tecelagem/add-produtos.vue').default);
//Vue.component('rform', require('./components/tecelagem/RForm.vue').default);
Vue.component('index', require('./components/tecelagem/manutencao/index.vue').default);
Vue.component('tipos', require('./components/tecelagem/manutencao/manutencaoTipos.vue').default);

/*const index = Vue.component('index', require('./components/tecelagem/manutencao/index.vue'));

Vue.use(VueRouter,VueAxios, axios);

const routes = [
    {
        name: 'Index',
        path: '/',
        component: index
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});

new Vue(
    Vue.util.extend(
        { router },
        AppIndex
    )
).$mount('#app');*/

const app = new Vue({
    el: '#app'
});

Function to save in the controller:

public function saveType(Request $request){
        try{
            \DB::beginTransaction();
            $input = $request->all();

            foreach($input as $entrada){

                $tipo = new TecManutencaoTipo();
                $tipo->tipo = $entrada->tipo;
                $tipo->manutencao = $entrada->manutencao;
                $tipo->periodo = $entrada->periodo;
                $tipo->save();
            }

            \DB::commit();

            return response()->json('salvo', 200);

        } catch (\Exception $e){
            \DB::rollback();
            return response()->json($e.'erro', 422);
        }
    }

The Routes:

Route::group(['prefix' => 'manutencao'], function () {
            Route::get('', ['as' => 'tecelagem.manutencao', 'uses' => 'TecelagemManutencaoController@index']);

            Route::group(['prefix' => 'tipos'], function () {
                //Route::get('', ['as' => 'tecelagem.manutencao.tipos', 'uses' => 'TecelagemManutencaoController@']);
                Route::post('salvar', ['as' => 'tecelagem.manutencao.tipos.salvar', 'uses' => 'TecelagemManutencaoController@saveType']);
            });
        });

As i said before, i'm facing problems the complete this save operation, a think that if i can do so, i'll be able to make the next ones.

I apreciate any help and if needed, i can put some more information.

Thank you all.

A 500 error is fairly generic, and you should have more information found in your Laravel or PHP/web server log. You're returning a 422 error yourself, but you aren't doing anything with the exception. Try adding a Log::info('TecManutencaoTipo failed: '.$e->getMessage()); inside of your catch block, then check the Laravel logs in storage/logs to see what message is being returned. — aynber
– aynber, Commented Jul 16, 2019 at 19:03
Can you share the code on any vcs like github to clone the code and help you fix errors! — mohamed hassan
– mohamed hassan, Commented Jul 16, 2019 at 19:12
$entrada is not an object. Try Log::info($entrada); at the start of your while loop to find out what it is. It's most likely an array, so the proper format would be $entrada['tipo'];, but double-check the log first. — aynber
– aynber, Commented Jul 16, 2019 at 19:26
No, it now looks like it's an integer instead of an array. Try Log::info($input); before the loop, what do you have? — aynber
– aynber, Commented Jul 16, 2019 at 19:34
Yes, it looks like you can. Remove the loop and use $input['tipo'] instead. — aynber
– aynber, Commented Jul 16, 2019 at 19:45

aynber · Accepted Answer · 2019-07-16 19:54:11Z

1

By using Log::info($input);, it was determined that a single array was being sent instead of an array of objects. So you would need to remove the loop, and access the data via the array keys instead:

public function saveType(Request $request){
    try{
        \DB::beginTransaction();
        $input = $request->all();

        $tipo = new TecManutencaoTipo();
        $tipo->tipo = $input['tipo'];
        $tipo->manutencao = $input['manutencao'];
        $tipo->periodo = $input['periodo'];
        $tipo->save();

        \DB::commit();

        return response()->json('salvo', 200);

    } catch (\Exception $e){
        \DB::rollback();
        Log::info("Unable to save TecManutencaoTipo, ".$e->getMessage());
        return response()->json($e.'erro', 422);
    }
}

answered Jul 16, 2019 at 19:54

aynber

23.2k9 gold badges57 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problems with CRUD using Laravel and Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related