我在axios上使用vue.js来发布数据，我正在尝试使用v-model计算总价值并将其保存在数据库中。它返回并关闭连接500 Internal Server Error。这是错误image。我无法回显或dd（）返回值。我怎样才能做到这一点？请帮助.........
我的laravel控制器代码：
public function smvCostAdd(Request $request)
{
$response = [
'status' => '',
'message' => '',
];
$rules = [
'knittingCost' => 'required',
'linkingCost' => 'required',
'tremingCost' => 'required',
'mendingCost' => 'required',
'washCost' => 'required',
'pcqCost' => 'required',
'ironCost' => 'required',
'ironCost' => 'required',
'sewingCost' => 'required',
'packingCost' => 'required',
];
$validator = Validator::make($request->all(), $rules);
if ($validator->fails()) {
return response()->json([
'errors' => $validator->errors(),
]);
}
$trans_id_d= $request->trans_id_d;
try {
$edit_data = BCACost::where('trans_id_d', $trans_id_d);
DB::beginTransaction();
$edit_data->KNITTING_C = $request->knittingCost;
$edit_data->LINKING_C = $request->linkingCost;
$edit_data->TRIMMING_C = $request->tremingCost;
$edit_data->MENDING_C = $request->mendingCost;
$edit_data->WASH_C = $request->washCost;
$edit_data->PQC_C = $request->pcqCost;
$edit_data->IRON_C = $request->ironCost;
$edit_data->SEWING_C = $request->sewingCost;
$edit_data->PACKING_C = $request->packingCost;
$edit_data->update();
DB::commit();
$response['status'] = "success";
$response['message'] = 'Data Stored Successfully!';
} catch (Exception $e) {
DB::rollback();
$response['status'] = "danger";
$response['message'] = 'Data Store Failed. Error Code: 101';
}
return response()->json($response);
}
web.php中的路由代码
Route::post('bca/smv-cost-action', 'BCAController@smvCostAdd');
刀片代码：
<form id="smv-cost-form">
<input type="hidden" name="trans_id_d" value="36">
<tr id="smvCostAdd" class="">
<td colspan="2">
<input type="text" name="knittingCost" id="knittingCost" v-model.number="knittingCost"
class="input-custom form-control"/>
<div class="error" v-if="knittingCost_error">
@{{knittingCost_error}}
</div>
</td>
<td colspan="2">
<input type="text" id="linkingCost" name="linkingCost" v-model.number="linkingCost"
class="input-custom form-control"/>
<div class="error" v-if="linkingCost_error">
@{{linkingCost_error}}
</div>
</td>
<td colspan="2">
<input type="text" id="tremingCost" name="tremingCost" v-model.number="tremingCost"
class="input-custom form-control"/>
<div class="error" v-if="tremingCost_error">
@{{tremingCost_error}}
</div>
</td>
<td colspan="2">
<input type="text" id="mendingCost" name="mendingCost" v-model.number="mendingCost"
class="input-custom form-control"/>
<div class="error" v-if="mendingCost_error">
@{{mendingCost_error}}
</div>
</td>
<td colspan="2">
<input type="text" id="washCost" name="washCost" v-model.number="washCost"
class="input-custom form-control"/>
<div class="error" v-if="washCost_error">
@{{washCost_error}}
</div>
</td>
<td colspan="2">
<input type="text" id="pcqCost" name="pcqCost" v-model.number="pcqCost"
class="input-custom form-control"/>
<div class="error" v-if="pcqCost_error">
@{{pcqCost_error}}
</div>
</td>
<td>
<input type="text" id="ironCost" name="ironCost" v-model.number="ironCost"
class="input-custom form-control"/>
<div class="error" v-if="ironCost_error">
@{{ironCost_error}}
</div>
</td>
<td>
<input type="text" id="sewingCost" name="sewingCost" v-model.number="sewingCost"
class="input-custom form-control"/>
<div class="error" v-if="sewingCost_error">
@{{sewingCost_error}}
</div>
</td>
<td>
<input type="text" id="packingCost" name="packingCost" v-model.number="packingCost"
class="input-custom form-control"/>
<div class="error" v-if="packingCost_error">
@{{packingCost_error}}
</div>
</td>
<td>
</td>
<td></td>
</tr>
<tr id="smvCostSum" class="">
<td colspan="2">
<input type="text" name=""
class="input-custom form-control" v-model="knittingCostTTL"
readonly/>
</td>
<td colspan="2">
<input type="text" v-model="linkingCostTTL"
class="input-custom form-control" readonly/>
</td>
<td colspan="2">
<input type="text" v-model="tremingCostTTL"
class="input-custom form-control" readonly/>
</td>
<td colspan="2">
<input type="text" v-model="mendingCostTTL"
class="input-custom form-control" readonly/>
</td>
<td colspan="2">
<input type="text" v-model="washCostTTL"
class="input-custom form-control" readonly/>
</td>
<td colspan="2">
<input type="text" v-model="pcqCostTTL"
class="input-custom form-control" readonly/>
</td>
<td>
<input type="text" v-model="ironCostTTL"
class="input-custom form-control" readonly/>
</td>
<td>
<input type="text" v-model="sewingCostTTL"
class="input-custom form-control" readonly/>
</td>
<td>
<input type="text" v-model="packingCostTTL"
class="input-custom form-control" readonly/>
</td>
<td>
<input type="text"
class="input-custom form-control" readonly/>
</td>
<td>
<button class="btn btn-md btn-primary" @click="saveSMVcost()">
Save
</button>
</td>
</tr>
<tr>
<td>Total Profit</td>
<td></td>
<td>%</td>
<td></td>
</tr>
vue js代码：
var app = new Vue({
el: "#smvcost",
data: {
order_id: '',
order_option: '',
selectOrderOptions: [],
orderLcData: [],
details_cost_breakdown: [],
form: '',
ifSelected: false,
knittingTime: '',
linkingTime: '',
tremingTime: '',
mendingTime: '',
washTime: '',
pcqTime: '',
ironTime: '',
sewingTime: '',
packingTime: '',
knittingCost: '',
linkingCost: '',
tremingCost: '',
mendingCost: '',
washCost: '',
pcqCost: '',
ironCost: '',
sewingCost: '',
packingCost: '',
totalCostSum: '',
knittingCost_error: '',
linkingCost_error: '',
tremingCost_error: '',
mendingCost_error: '',
washCost_error: '',
pcqCost_error: '',
ironCost_error: '',
sewingCost_error: '',
packingCost_error: '',
},
mounted: function () {
this.getAllOrderForCost();
},
computed: {
knittingCostTTL: function () {
return this.knittingTime * this.knittingCost;
},
linkingCostTTL: function () {
return this.linkingTime * this.linkingCost;
},
tremingCostTTL: function () {
return this.tremingTime * this.tremingCost;
},
mendingCostTTL: function () {
return this.mendingTime * this.mendingCost;
},
washCostTTL: function () {
return this.washTime * this.washCost;
},
pcqCostTTL: function () {
return this.pcqTime * this.pcqCost;
},
ironCostTTL: function () {
return this.ironTime * this.ironCost;
},
sewingCostTTL: function () {
return this.sewingTime * this.sewingCost;
},
packingCostTTL: function () {
return this.packingTime * this.packingCost;
},
},
methods: {
saveSMVcost: function () {
var base_url = window.location.origin;
var page_url = base_url + '/bca/smv-cost-action';
var form = document.querySelector("#smv-cost-form");
var formData = new FormData(form);
$('#ajax-call-effect').show();
axios.post(page_url, formData).then(
function (response) {
console.log('Test');
$('#ajax-call-effect').hide();
if (response.data.errors) {
response.data.errors.knittingCost ? app.knittingCost_error = response.data.errors.knittingCost[0] : app.knittingCost_error = '';
response.data.errors.linkingCost ? app.linkingCost_error = response.data.errors.linkingCost[0] : app.linkingCost_error = '';
response.data.errors.tremingCost ? app.tremingCost_error = response.data.errors.tremingCost[0] : app.tremingCost_error = '';
response.data.errors.mendingCost ? app.mendingCost_error = response.data.errors.mendingCost[0] : app.mendingCost_error = '';
response.data.errors.washCost ? app.washCost_error = response.data.errors.washCost[0] : app.washCost_error = '';
response.data.errors.pcqCost ? app.pcqCost_error = response.data.errors.pcqCost[0] : app.pcqCost_error = '';
response.data.errors.ironCost ? app.ironCost_error = response.data.errors.ironCost[0] : app.ironCost_error = '';
response.data.errors.sewingCost ? app.sewingCost_error = response.data.errors.sewingCost[0] : app.sewingCost_error = '';
response.data.errors.packingCost ? app.packingCost_error = response.data.errors.packingCost[0] : app.packingCost_error = '';
}
else {
console.log('Test');
/*$('#knittingCost').val('');
$('#linkingCost').val('');
$('#tremingCost').val('');
$('#mendingCost').val('');
$('#washCost').val('');
$('#pcqCost').val('');
$('#ironCost').val('');
$('#sewingCost').val('');
$('#packingCost').val('');*/
app.knittingCost_error = '';
app.linkingCost_error = '';
app.tremingCost_error = '';
app.mendingCost_error = '';
app.washCost_error = '';
app.pcqCost_error = '';
app.ironCost_error = '';
app.sewingCost_error = '';
app.packingCost_error = '';
app.showNotification('top', 'center', response.data.status, response.data.message);
}
})
},
showNotification: function (from, align, color, msg) {
$.notify({
icon: "",
message: msg
}, {
type: color,
placement: {
from: from,
align: align
},
delay: 2000,
});
},
/* totalCost: function () {
this.items.push({
parseInt(
this.knittingCostTTL()) + parseInt(this.linkingCostTTL()) + parseInt(this.mendingCostTTL()) + parseInt(this.pcqCostTTL()) + parseInt(this.sewingCostTTL()) + parseInt(this.ironCostTTL()) + parseInt(this.packingCostTTL()) + parseInt(this.tremingCostTTL()) + parseIntthis.washCostTTL();
})
/!*return parseInt(this.knittingCostTTL()) + parseInt(this.linkingCostTTL()) + parseInt(this.mendingCostTTL()) + parseInt(this.pcqCostTTL()) + parseInt(this.sewingCostTTL()) + parseInt(this.ironCostTTL()) + parseInt(this.packingCostTTL()) + parseInt(this.tremingCostTTL()) + parseIntthis.washCostTTL();*!/
},*/
getAllOrderForCost: function () {
var base_url = window.location.origin;
$('#ajax-call-effect').show();
var page_url = base_url + '/bca/get-all-order-for-smv-cost-add';
this.$http.get(page_url).then(
function (response) {
app.selectOrderOptions = response.data;
$('#ajax-call-effect').hide();
}
);
},
changeTableData: function (order_option) {
var order_id = order_option;
var base_url = window.location.origin;
var page_url = base_url + '/bca/get-buyer-info-for-cost-break-down/' + order_id;
this.$http.get(page_url).then(
function (response) {
app.orderLcData = response.data;
app.ifSelected = true;
Vue.nextTick(function () {
$('[data-toggle="tooltip"]').tooltip()
})
}
);
},
detailsCostBreakDown: function (order_id) {
var base_url = window.location.origin;
$('#ajax-call-effect').show();
var page_url = base_url + '/bca/get-details-cost-break-down/' + order_id;
this.$http.get(page_url).then(
function (response) {
app.details_cost_breakdown = response.data.costBreakdown;
$('#ajax-call-effect').hide();
}
);
},
convertDate: function (date) {
return new Date(date).toLocaleDateString();
},
/* ----------------------
/ Total Calculation
/ ------------------------
*/
sumOrderQty: function () {
var total = 0;
this.details_cost_breakdown.forEach(function (input) {
total += Number(input.qty);
});
return total.toFixed(2);
},
totalLcValue: function () {
var total = 0;
this.details_cost_breakdown.forEach(function (input) {
total += Number(input.qty * input.unit_price);
});
return total.toFixed(2);
},
totalYarnQty: function () {
var totalYarn = 0;
var yarnWastage = 0;
this.details_cost_breakdown.forEach(function (input) {
totalYarn += Number(input.yarn_qty);
yarnWastage += Number(input.wastage_yarn);
});
var total = totalYarn + yarnWastage
return total.toFixed(2);
},
}
})
;
Vue.directive('tooltip', function (el, binding) {
$(el).tooltip({
title: binding.value,
placement: binding.arg,
trigger: 'hover'
})
})