拉拉维尔的"Invalid argument supplied for foreach()"错误

Question

这是我的刀片视图，我在其中获取总结算报告和总存款的值。如果不同，则自动计算并显示差异。根据差异，需要为差异金额添加以下详细信息，并存储在现金支出中。例如，总结算报告为200，总存款为100，则需要提供差额金额的详细信息。即100。在这种情况下，假设用户通过添加另一行，在一个文本框中输入了50的费用金额，而在另一个文本盒中则输入了50。

<div class="form-group row">
<div class="col-12">
<label>Total Closing Report</label>
<input class="form-control" v-model="form.closing_report_total" @change="calculate" type="number" required name="closing_report_total" placeholder="Enter Closing Report Total">   
</div>
</div>
<div class="form-group row">
<div class="col-12">
<label>Total Deposit</label>
<input class="form-control" type="number" v-model="form.total_deposit" @change="calculate" required name="total_deposit" placeholder="Enter Total Deposit">   
</div>
</div>
<div class="form-group row">
<div class="col-12">
<label>Difference</label>
<input class="form-control" type="number" v-model="form.difference" name="difference"  placeholder="Enter Difference" readonly>   
</div>
</div>
<div class="form-group row" v-if="form.difference != 0" v-for="(comment, k) in form.cashoutexpenses" :key="k">
<div class="col-4">
<input type="text" class="flatpickr form-control" v-model="comment.expense_date" required name="expense_date" placeholder="Click here to choose Date"> 
</div>
<div class="col-4">
<input class="form-control" type="number" v-model="comment.amount" required name="amount" placeholder="Enter Expense Amount" @change="calculate_error">   
</div>
<div class="col-4">
<input class="form-control" type="text" v-model="comment.comment" required name="comment" placeholder="Enter Expense Comments">  
</div>
<div class="col-4">
<button class="btn btn-sm btn-danger" type="button" @click="removeRow(k)">Remove</button>  
</div>
</div>
<div class="form-group row" v-if="form.left > 0">
<div class="col-12">
<input class="btn btn-primary form-control" type="button" value="Add Row" @click="addRow()"> 
</div>
</div>

下面是我的脚本代码。

<script>
var app = new Vue({
el: '#app',
mounted: function() {
},
computed: {
difference: function() {
return this.form.difference = this.form.closing_report_total - this.form.total_deposit;
}
},
data: {
form: {
closing_report_total : 0.00,
total_deposit: 0.00,
difference: 0.00,
left: 0.00,
comments: '',
cashoutexpenses: [],
buffer: []
}, 

},
methods: {
addRow() {
this.form.cashoutexpenses.push({
date: '',
amount: '',
comment: '',
});
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
removeRow(index) {
this.form.cashoutexpenses.splice(index, 1);
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
calculate: function() {
this.form.difference = this.form.closing_report_total - this.form.total_deposit;
this.form.cashoutexpenses = [];
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
if(this.form.difference != 0) {
this.addRow();
}
},
calculate_error: function() {
this.form.left = this.form.difference - this.form.cashoutexpenses.reduce((a,b)=> (a + (parseInt(b['amount'])||0)),0);
if(this.form.left<0) {
alert("Sum of expenses should not exceed total amount");
for(var i=0; i<this.form.cashoutexpenses.length;i++) {
if(this.form.cashoutexpenses[i].amount!=this.form.buffer[i].amount) {
this.form.buffer[i].amount = 0;
this.form.cashoutexpenses[i].amount=this.form.difference - this.form.buffer.reduce((a,b)=> (a + (parseInt(b['amount'])||0)),0);
}
}
}
else if(this.form.left>0) {
alert("Please add "+this.form.left+" more");
}
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
formSubmit: function(e) {
e.preventDefault();
let currentObj = this;
// let data = new FormData();
let formData = new FormData()
formData.append('closing_report_total', this.form.closing_report_total);
formData.append('total_deposit', this.form.total_deposit);
formData.append('difference', this.form.difference);
formData.append('form.cashoutexpenses', this.form.cashoutexpenses);
let config = { headers: { 'Content-Type': 'multipart/form-data' } }
axios.post('/cashoutdetails/store', formData ,config)
.then(response => {
//console.log(formData);
//alert('data saved');
//window.location.href = "{{ route('cashoutdetails.index')}}";
})
.catch(function (error) {
alert('Error');
}); 
}
}
})
</script>

如果我在mozilla firefox的vue插件中检查相同的内容，则会显示正确的数据，如下所示--

cashoutexpenses:Array[2]
0:Object
amount:"50"
comment:"test2"
date:""
expense_date:"2021-10-10"
1:Object
amount:"50"
comment:"test3"
date:""
expense_date:"2021-10-12"

现在在我的控制器中，我正在获取数据，如下所示-

$comments = $request->form_cashoutexpenses;
//return $comments;
foreach($comments as $c) {
return $c;
$cashout_comments = new CashOutExpenses;
$cashout_comments->cashout_id = $cashout_details->id;
$cashout_comments->expense_date = $c['expense_date'];
$cashout_comments->amount = $c['amount'];
$cashout_comments->explanation = $c['comment'];
$cashout_comments->save();
} 
return response()->json([
'message' => 'Details added!',
], 201);  

如果我返回$comments，它会以[objectObject]、[objectObject]来给出回复，否则它会为foreach返回错误。

如果我返回$request->all((。。。它给出以下输出-

{"closing_report_total"："200"，"total_deposite"："100"，"difference"："100%"，"form.cashoutexpenses"："[对象]"}

请帮我把这些数据保存在现金支出表中。

Answer 1

我不完全理解您的代码，但我注意到了一些潜在的问题部分：

1. $request->form_cashoutexpenses很可能不是数组，这就是您可能会出现此错误的原因。您可以在声明$comments后放入dd($comments, gettype($comments));并重新运行页面
2. 在foreach循环的第一行有return语句似乎很愚蠢，因为下面的代码永远不会被执行