Php Laravel设置表单值=“0”；旧的（“输入”）；使用VUEJS2

我有一个简单的表格，里面有一个计算器，计算的金额包括运费和税金。如果表单已提交且返回时出现错误，如何使用

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>

总金额
$
装运金额
$
税率
%
总额$@{{combinedAmount}

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>

newvue({
el:“#应用程序内容”，
数据：{
BillSameaship:“”，
伊希登：“真的”，
总金额：''，
发货金额：''，
税率：''，
组合装载：“”
},
计算：{
totalAmount2:函数（）{
返回this.totalAmount={{old（'totalAmount'）？？0}；
},
shipAmount2:函数（）{
返回this.shipAmount={（旧（'shipAmount'）？？0}；
},
税率2：功能（）{
返回this.taxRate={（旧（'taxRate'）？？0}；
}
},
更新之前（）{
this.getTotal（）
this.totalAmount=this.totalAmount2；
},
方法：{
onChange:function（）{
如果（this.billSameAsShip=='false'）{
this.ishiden=！this.ishiden；
}
否则{
this.ishiden=布尔值（'true'）；
}
},
checkNaN:function（）{
if（isNaN（parseFloat（this.totalAmount）））{
此值为0.totalAmount=0
}
if（isNaN（parseFloat（this.shipAmount）））{
此值为0.shipAmount=0
}
if（isNaN（parseFloat（this.taxRate）））{
该税率为0
}
},
getTotal:function（）{
这是checkNaN（）；
this.combinedAmount=（parseFloat（this.totalAmount）+parseFloat（this.shipAmount））*（1+（parseFloat（this.taxRate/100））；
}
}
})

因为您正在使用

v-model

将输入绑定到模型，所以不需要使用Laravel的

值=“{{old（'input'）}}”

。这里需要做的就是从输入中删除value属性，并清除整个计算函数。在您的逻辑中，一旦您提交了数据，您将需要清除/重置可编辑输入

newvue({
el:#应用程序内容“，
数据：{
BillSameaship:“”，
伊希登：“真的”，
总金额：“，
装运金额：“，
税率：“，
组合挂载：“
},
更新之前（）{
this.getTotal（）
this.totalAmount=this.totalAmount2；
},
方法：{
onChange:function（）{
如果（this.billSameAsShip==“false”）{
this.ishiden=！this.ishiden；
}否则{
this.ishiden=布尔值（“真”）；
}
},
checkNaN:function（）{
if（isNaN（parseFloat（this.totalAmount）））{
此值为0.totalAmount=0；
}
if（isNaN（parseFloat（this.shipAmount）））{
此值为0.shipAmount=0；
}
if（isNaN（parseFloat（this.taxRate）））{
该税率为0；
}
},
getTotal:function（）{
这是checkNaN（）；
这是一座山=
（parseFloat（this.totalAmount）+parseFloat（this.shipAmount））*
（1+parseFloat（本税率/100））；
}
}
});

总金额
$
装运金额
$
税率
%
总额${{combinedAmount}
我希望能够记住这些值，因此当由于错误而回发时，用户不会将字段归零。目前，他们返回的所有0都与此图像类似-我尝试：value=“totalAmount”，但这仍然不会将输入放入存储在Vue实例中的内容。能否在上面的代码片段中向我展示您的更新代码，我不确定您此后如何处理提交和响应。