我最近开始在laravel中使用vue。
我在一个进行中的项目中构建了一个刀片视图，并在其上使用vue模板，我可以正常看到所有内容，但是当页面加载时，我收到了： “ [Vue警告]：编译模板时出错：
模板仅应负责将状态映射到UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。” 当我尝试保存时，出现422和500错误。
这还将是一个多页应用程序。
我已经尝试在刀片中提供script标签的类型，更改section标签的script标签，但都没有成功。 至于保存，我将控制台中的数据记录在模板中，并且所有数据都在那，正如我所期望的那样，但是由于某种原因，该数据在控制器中出现了一些错误，说实话，我已经呆了两周了为了解决这个问题，我多次重写了我的代码，但仍然没有想到。 有人可以帮我带来一些想法吗？
遵循代码：
这是刀片文件：
@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
主要的vue组件：
<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>
第二个vue组件：
<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'
});
要保存在控制器中的功能：
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);
}
}
路线：
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']);
});
});
正如我之前说过的那样，我在完成此保存操作时遇到了问题，认为如果我能够做到，我将可以制造下一个。
我非常感谢您的帮助，如果需要，我可以提供更多信息。
谢谢大家。
答案 0 :(得分：1)
通过使用Log::info($input);，确定正在发送单个数组而不是对象数组。因此，您需要删除循环，然后通过数组键访问数据：
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);
}
}