我有一个简单的表格,带有计算器,用于充电器,包括运费和税金。如果表单已提交并返回错误,如何使用Vue JS
将旧输入显示在表单的值字段中?实例值返回正确,但它们不会显示在表单中。
查看
<div class="form-group">
<label for="totalAmount">Total Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" value="{{old('totalAmount')}}" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
</div>
</div>
<div class="form-group">
<label for="shipAmount">Shipping Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" value="{{ old('shipAmount') }}" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
</div>
</div>
<div class="form-group">
<label for="taxRate">Tax Rate</label>
<div class="input-group">
<div class="input-group-addon">%</div>
<input type="taxRate" class="form-control" id="taxRate" name="taxRate" value="{{ old('taxRate') }}" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
</div>
</div>
<div class="widget-body text-center">
<h4 class="m-b-md">Total Amount $ @{{ combinedAmount }}</h4>
</div>
JS档案
new Vue({
el: '#app-content',
data: {
billSameAsShip: '',
isHidden: 'true',
totalAmount: '',
shipAmount: '',
taxRate: '',
combinedAmount: ''
},
computed: {
totalAmount2: function () {
return this.totalAmount = {{ old('totalAmount') ?? 0 }};
},
shipAmount2: function () {
return this.shipAmount = {{ ( old('shipAmount') ?? 0 ) }};
},
taxRate2: function () {
return this.taxRate = {{ ( old('taxRate') ?? 0 ) }};
}
},
beforeUpdate() {
this.getTotal()
this.totalAmount = this.totalAmount2;
},
methods: {
onChange: function() {
if(this.billSameAsShip == 'false'){
this.isHidden = !this.isHidden;
}
else {
this.isHidden = Boolean('true');
}
},
checkNaN: function() {
if(isNaN(parseFloat(this.totalAmount))){
this.totalAmount = 0
}
if(isNaN(parseFloat(this.shipAmount))){
this.shipAmount = 0
}
if(isNaN(parseFloat(this.taxRate))){
this.taxRate = 0
}
},
getTotal: function() {
this.checkNaN();
this.combinedAmount = (parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) * (1 + (parseFloat(this.taxRate /100)));
}
}
})
</script>
答案 0 :(得分:1)
因为您使用v-model
将输入绑定到模型,所以您不需要使用Laravel的value="{{ old('input') }}"
。您需要做的就是从输入中删除值属性并清除整个计算函数。在您的逻辑中,一旦提交了数据,您将需要清除/重置可编辑的输入。
new Vue({
el: "#app-content",
data: {
billSameAsShip: "",
isHidden: "true",
totalAmount: "",
shipAmount: "",
taxRate: "",
combinedAmount: ""
},
beforeUpdate() {
this.getTotal()
this.totalAmount = this.totalAmount2;
},
methods: {
onChange: function() {
if (this.billSameAsShip == "false") {
this.isHidden = !this.isHidden;
} else {
this.isHidden = Boolean("true");
}
},
checkNaN: function() {
if (isNaN(parseFloat(this.totalAmount))) {
this.totalAmount = 0;
}
if (isNaN(parseFloat(this.shipAmount))) {
this.shipAmount = 0;
}
if (isNaN(parseFloat(this.taxRate))) {
this.taxRate = 0;
}
},
getTotal: function() {
this.checkNaN();
this.combinedAmount =
(parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) *
(1 + parseFloat(this.taxRate / 100));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app-content">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="totalAmount">Total Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
</div>
</div>
<div class="form-group">
<label for="shipAmount">Shipping Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
</div>
</div>
<div class="form-group">
<label for="taxRate">Tax Rate</label>
<div class="input-group">
<div class="input-group-addon">%</div>
<input type="taxRate" class="form-control" id="taxRate" name="taxRate" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
</div>
</div>
<div class="widget-body text-center">
<h4 class="m-b-md">Total Amount $ {{ combinedAmount }}</h4>
</div>
</div>
</div>
</div>
</div>