我正在尝试使用v-for和vue.js
呈现一个表行这是我试图循环的表格行。
请注意。我在laravel刀片视图中使用。所以@ {{}}用于vue渲染。
<form action="{{$route}}" method="post" class="container-fluid" id="sale">
{{csrf_field()}}
@if(!empty($isPut))
{{method_field('PUT')}}
@endif
<input type="hidden" name="tickets" value="{{json_encode($ids)}}">
<div class="form-group row">
<label for="qty" class="col-sm-2">Quantity</label>
<input id="qty" class="col col-sm-2 form-control text-right " type="number" step="1" name="qty" :value="qty">
</div>
<table class="table table-responsive-md table-bordered">
<thead class="text-center">
<tr>
<th>#</th>
<th>Itinerary</th>
<th>Date</th>
<th>Price Each</th>
<th>Amount In MMK</th>
</tr>
</thead>
<tbody>
<tr v-for="(ticket, index) in tickets">
<td class="text-right">@{{index + 1}}</td>
<td>@{{ticket.from_location.abbreviation}} - @{{ticket.to_location.abbreviation}}</td>
<td>@{{ticket.date}}</td>
<td class="text-right">@{{ticket.price}} @{{ticket.currency.name}}</td>
<td class="text-right">@{{calcualteAmountInMMK(ticket.price, ticket.currency.name)}}</td>
</tr>
<tr class="text-right">
<td colspan="4" >Sub Total</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="sub_total" readonly></td>
</tr>
<tr class="text-right">
<td colspan="4">Discount</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="discount"></td>
</tr>
<tr class="text-right">
<td colspan="4">Total</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="total" readonly></td>
</tr>
</tbody>
</table>
<!-- Passenger Block -->
<div class="row" v-for="n in qty">
<div class="form-group col col-6">
<label for="passengers">Passenger @{{n}}:Name</label>
<input class="form-control" :name="inputPassengerName(n-1, 'name')" required>
</div>
<div class="form-group col col-6">
<label for="passengers">Passenger @{{n}}:Passport</label>
<input class="form-control" :name="inputPassengerName(n-1, 'passport')" required>
</div>
</div>
</form>
@push('script')
<script>
var app = new Vue({
el: '#app',
data: {
qty: 1,
ex_rate: 1,
sub_total: 0,
discount: 0,
tickets: {!!json_encode($tickets)!!}
},
methods: {
inputPassengerName: function(index, property) {
return "passengers["+index+"]["+property+"]";
},
calcualteAmountInMMK: function(price, currency) {
var result;
if(currency == "USD"){
result = (price * this.qty * this.ex_rate);
} else if(currency == "MMK"){
result = (price * this.qty);
}
this.sub_total += result;
return result;
}
},
computed: {
total: function() {
return (this.sub_total - this.discount);
}
}
});
</script>
@endpush
它显示以下错误。
[Vue警告]：您可能在组件渲染功能中有一个无限的更新循环。
请帮助我如何解决这个问题。我做错了什么？ 有什么想法吗？
答案 0 :(得分：0)
<form action="{{$route}}" method="post" class="container-fluid" id="sale">
{{csrf_field()}}
@if(!empty($isPut))
{{method_field('PUT')}}
@endif
<input type="hidden" name="tickets" value="{{json_encode($ids)}}">
<div class="form-group row">
<label for="qty" class="col-sm-2">Quantity</label>
<input id="qty" class="col col-sm-2 form-control text-right" min='1' type="number" step="1" name="qty" v-model="qty">
</div>
<div class="form-group row">
<label for="ex_rate" class="col-sm-2">Exchange Rate</label>
<input id="ex_rate" class="col col-sm-2 form-control text-right" min='1' type="number" step="1" name="ex_rate" v-model="ex_rate">
</div>
<table class="table table-responsive-md table-bordered">
<thead class="text-center">
<tr>
<th>#</th>
<th>Itinerary</th>
<th>Date</th>
<th>Price Each</th>
<th>Amount In MMK</th>
</tr>
</thead>
<tbody>
<tr v-for="(ticket, index) in tickets">
<td class="text-right">@{{index + 1}}</td>
<td>@{{ticket.from_location.abbreviation}} - @{{ticket.to_location.abbreviation}}</td>
<td>@{{ticket.date}}</td>
<td class="text-right">@{{ticket.price}} @{{ticket.currency.name}}</td>
<td class="text-right">@{{amounts[index]}} MMK</td>
</tr>
<tr class="text-right">
<td colspan="4" >Sub Total</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="sub_total" readonly></td>
</tr>
<tr class="text-right">
<td colspan="4">Discount</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="discount"></td>
</tr>
<tr class="text-right">
<td colspan="4">Total</td>
<td><input class="text-right form-control" type="number" step="any" name="discount" v-model="total" readonly></td>
</tr>
</tbody>
</table>
<!-- Passenger Block -->
<div class="row" v-for="n in qty">
<div class="form-group col col-6">
<label for="passengers">Passenger @{{n}}:Name</label>
<input class="form-control" :name="inputPassengerName(n-1, 'name')" required>
</div>
<div class="form-group col col-6">
<label for="passengers">Passenger @{{n}}:Passport</label>
<input class="form-control" :name="inputPassengerName(n-1, 'passport')" required>
</div>
</div>
</form>
@push('script')
<script>
var app = new Vue({
el: '#app',
data: {
qty: 1,
ex_rate: 1,
discount: 0,
tickets: {!!json_encode($tickets)!!}
},
methods: {
inputPassengerName: function(index, property) {
return "passengers["+index+"]["+property+"]";
}
},
computed: {
total: function() {
return (this.sub_total - this.discount);
},
amounts: function() {
var app = this;
return app.tickets.map(function(ticket) {
var result;
if(ticket.currency.name == "USD"){
result = (ticket.price * app.qty * app.ex_rate);
} else if(ticket.currency.name == "MMK"){
result = (ticket.price * app.qty);
}
return result;
});
},
sub_total : function() {
var app = this;
return app.amounts.reduce(function(a, b) {
return a + b;
});
}
}
});
</script>
@endpush